title: Hide an element using a specific id
body: <p>I have this html structure:</p>
  
  <pre><code> &lt;div id="main"&gt;
      &lt;div id="box" data-id="1"&gt;
      &lt;div id="box" data-id="2"&gt;
      &lt;div id="box" data-id="3"&gt;
      &lt;div id="box" data-id="4"&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>When I've a click event in jquery on a button I want that the box with data-id="1" become hidden:</p>
  
  <pre><code>$('#box[data-id=1]').hide();
  </code></pre>
  
  <p>this is work.</p>
  
  <p>However if I want that the data-id="2" become hidden:</p>
  
  <pre><code>$('#box[data-id=2]').hide();
  </code></pre>
  
  <p>this doesn't works and I should write like: </p>
  
  <pre><code>$('#main #box[data-id=2]').hide();
  </code></pre>
  
  <p>why should the last one work or the one before shouldn't? </p>