I have a couple of tables with similar structures like this:

<table>
<tbody>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr> ..etc
    --- The fake button is added here
    <div class="addrow">Add another</div>
</tbody>
</table>

Since this is a long list, I have a need to toggle the rows one at a time. I just need to show the first row, of course, the rest should be toggled.

The action is when I click a dynamic fake button, it will show row no. 2, and clicking again will show another next row.

This is what I have done so far:

$("table#field_fruit_values tr.draggable").not(':first').hide();
$("table#field_vegetables_values tr.draggable").not(':first').hide();


$("body.form table.content-multiple-table tbody").append('<div class="addrow">Add</div>');

$(".addrow").click(function() {
  var  hiddenRow = $(this).prev('tr.draggable');
  $(this).prev(hiddenRow + 1).show();
    //if (hiddenRow + ':last').length) { // <= silly logic
     // $(this).hide();
    //}
});

The button only works for one row. I must have done something wrong :)

When the final is reached, I also want the button to disappear.

Sorry if this question sound silly.

Any help would be very much appreciated.

Thanks.