title: fadeOut() only fades out the first element
body: <p>By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.</p>
  
  <p>The markup:</p>
  
  <pre><code>&lt;div class="holder" id="window_one"&gt;
      &lt;div class="title_bar"&gt;
          &lt;p&gt;Window 1&lt;/p&gt;
          &lt;div class="control_holder"&gt;
              &lt;span class="controls" id="close"&gt;X&lt;/span&gt;
              &lt;span class="controls" id="minimize"&gt;_&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="interface"&gt;
          &lt;p&gt;Testing123&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="calculator" id="window_two"&gt;
      &lt;div class="title_bar"&gt;
          &lt;p&gt;Window 2&lt;/p&gt;
          &lt;div class="control_holder"&gt;
              &lt;span class="controls" id="close"&gt;X&lt;/span&gt;
              &lt;span class="controls" id="minimize"&gt;_&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="interface"&gt;
          &lt;p&gt;Testing123&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The jQuery:</p>
  
  <pre><code>$(document).ready(function() {
      $('#close').click(function() {
          $(this).parents('.holder').fadeOut(250);
      });
  });
  </code></pre>
  
  <p>What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.</p>
  
  <p>I'd demo the code on jsFiddle but is seems to be down atm.</p>