Linking divs with same counter using Jquery

I have a table which gets data from the database using PHP.

The table contains the parent 2 elements, lets say they are:

Name    Surname    << table row id = info1

Name    Surname    << table row id = info2

Beneath every row, there is another row which is hidden by default. When first name is clicked, this is how i want it to display:

Name    Surname    << table row id = info1
DOB     City       << table row id = infoSub1

Name    Surname    << table row id = info2
                   << table row id = infoSub2 NOT DISPLAYED

How can I implement this in the most effective way?

Thanks

$("#info1").click(function() {
    $(this).children("#infoSub1").slideDown();
});

Then do the same for info2 and infoSub2 :)

If you can give the parent rows a class (for example parent), then you can make this very generic with .nextUntil():

$("tr.parent").click(function() {
  $(this).nextUntil(".parent").toggle();
});

This just selects all the <tr> elements that aren't .parent following the clicked row until it finds one that is. This allows you any number of non-parent rows in-between, and it would toggle them all correctly. If you have a long table with lots of rows, use .delegate() in a similar way:

$("#tableID").delegate("tr.parent", "click", function() {
  $(this).nextUntil(".parent").toggle();
});

This behaves the same, but would attach one event handler to the <table> (rather than one per parent <tr>).