Question

I have 2 tables, where I have some rows with some image buttons. What I want to do is, when I click on the image button, is to SHOW the div that is placed right under the table which contains the clicked image button.

<table id="Table1">
  <tr>
     <td><input type="image" src="Images/info.jpg" class="infoButton" /></td>
  </tr>
</table>
<div class="info">            
</div>

<table id="Table2">
  <tr>
     <td><input type="image" src="Images/info.jpg" class="infoButton" /></td>
  </tr>
</table>
<div class="info">            
</div>

What I have done so far is this:

$('.infoButton').click(function () {                          
    $(this).closest('table').siblings().filter(":first").show();
});

This works when I click a button inside the 1st table. Then it shows the correct div (the one under table 1). When I click on a button inside table 2, then it again shows the same div. I want it to show the div under table 2.

Answer 1

$('.infoButton').click(function () {                          
    $(this).closest('table').next('div').show();
});

DEMO