title: jQuery add row to table after specific index with multiple tables on the screen
body: <p>I have 2 tables on a page at once. I want to only manipulate the bottom table through jQuery by adding a row below the row that is clicked. I've managed to figure out using <code>this.rowIndex</code> to add the extra row based on the <code>&lt;tr&gt;</code> tag being clicked. But when 2 tables are in the mix, it gets confusing.</p>
  
  <p>I've tried using jQuery ID selectors based on the table ID's but it either doesn't work or only the top row of the table is clickable. I've tried <code>#tableID &gt; thead &gt; tr","tr#tableID", "#tableID &gt; tr</code>, etc. The first one works but only for the top row.</p>
  
  <p>I've dumbed it down to the simplest form I could get it in on my fiddle page. In it's current form here, only the top table works. How do I get it so only the bottom table works and have it also ignore the "header" row being clicked?</p>
  
  <p><a href="http://jsfiddle.net/chewywaffles/8meWj/" rel="nofollow">Code is here</a></p>
  
  <p>JavaScript:</p>
  
  <pre><code>$('tr').click(function(){
      html = "&lt;tr&gt;&lt;td&gt;Jquery&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;";
      $('tr').eq(this.rowIndex).after(html); 
  });​
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table  id="detail" border=1&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;td width="138px"&gt;&lt;h5&gt;Campaign Name&lt;/h5&gt;&lt;/td&gt;
      &lt;td width="5%"&gt;&lt;h5&gt;Invites Sent&lt;/h5&gt;&lt;/td&gt;
      &lt;td width="5%"&gt;&lt;h5&gt;Invites Opened&lt;/h5&gt;&lt;/td&gt;
      &lt;td&gt;&lt;h5&gt;Unique Visits&lt;/h5&gt;&lt;/td&gt;
      &lt;td&gt;&lt;h5&gt;Referrals Shared&lt;/h5&gt;&lt;/td&gt;
      &lt;td&gt;&lt;h5&gt;Inquiries&lt;/h5&gt;&lt;/td&gt;
      &lt;td&gt;&lt;h5&gt;Sales Generated&lt;/h5&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
      &lt;tr&gt;
          &lt;td&gt;Test1&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Test2&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
      &lt;/tr&gt;        
  &lt;/table&gt;
  
  &lt;br /&gt;
  
  &lt;table  id="detail2" border=1&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;td width="138px"&gt;&lt;h5&gt;Campaign Name&lt;/h5&gt;&lt;/td&gt;
      &lt;td width="5%"&gt;&lt;h5&gt;Invites Sent&lt;/h5&gt;&lt;/td&gt;
      &lt;td width="5%"&gt;&lt;h5&gt;Invites Opened&lt;/h5&gt;&lt;/td&gt;
      &lt;td&gt;&lt;h5&gt;Unique Visits&lt;/h5&gt;&lt;/td&gt;
      &lt;td&gt;&lt;h5&gt;Referrals Shared&lt;/h5&gt;&lt;/td&gt;
      &lt;td&gt;&lt;h5&gt;Inquiries&lt;/h5&gt;&lt;/td&gt;
      &lt;td&gt;&lt;h5&gt;Sales Generated&lt;/h5&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
      &lt;tr&gt;
          &lt;td&gt;Test3&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Test4&lt;/td&gt;
          &lt;td&gt;4&lt;/td&gt;
          &lt;td&gt;4&lt;/td&gt;
          &lt;td&gt;4&lt;/td&gt;
          &lt;td&gt;4&lt;/td&gt;
          &lt;td&gt;4&lt;/td&gt;
          &lt;td&gt;4&lt;/td&gt;
      &lt;/tr&gt;   
  &lt;/table&gt;​
  </code></pre>
  
  <p>Thanks everyone!</p>