How to toggle div inside table rows when clicked
===

just having a little issue figuring this jquery problem out. I have a table with some numbers show on each row. I want it to so that when I click on the number which is a href link it toggles the div called "test" which is initially hidden. Currently with my code when I click one row with the number, all rows toggle since they share the same class name. How do I solve this issue so that only the row that is clicked toggles instead?

Some additional information the table and content is dynamically generated.

My HTML
    
    <table>
     <tr>
      <td>
        <a class="showinfo" href="#"><b>ID:12</b>Click me<b></a>
        <div class="test">Test</div>
      </td>
     </tr>
     <tr>
      <td>
        <a class="showinfo" href="#"><b>ID:46</b>Click me<b></a>
        <div class="test">Test</div>
      </td>
     </tr>
    </table>

My JS is as follows


    $('.test').hide();
    $('.showinfo').click(function(){
	    $('.test').toggle();	
    });

Thank you.