Question

I’m cloning a table the contains 2 buttons. One button clones and inserts a new table row, and the other button clones the entire table and inserts it after the last table.

When a table has been cloned and inserted at the bottom, I click on the the Add button to add a new row, the row gets inserted at the top table only.

How do I insert a new row in the corresponding table if I have 5 tables?

My HTML:

<table class="myTable">
<tr class="firstRow">
    <td>
        Name: <input type="text" size="30" />
    </td>
    <td>
        Email: <input type="text" size="30" />
    </td>
</tr>
<tr>
    <td colspan="2" align="right">
        <input type="button" value="Add" class="addRow" />
    </td>
</tr>
</table>

<p><input type="button" value="Copy" class="addTable" /></p>

jQuery:

$('.addRow').click(function(){
  var cloned = $('.firstRow').clone(true);
  cloned.insertAfter($('table.myTable tr').eq(-2)).removeClass('firstRow');
});


$('.addTable').click(function(){
  var cloned = $('.myTable').clone(true);
  cloned.insertAfter($('.myTable:last')).before('<hr />').removeClass('myTable');
});

My Fiddle:
http://jsfiddle.net/jonxblaze/S3N77/

Answer 1

Your implementation for .addRow button is not good.

Please try this one:

$('.addRow').click(function(){
    var cloned = $(this).parents('table').find('tr:eq(0)').clone(true);
    cloned.insertBefore($(this).parents('table').find('tr:last-child'));
});

The above implementation does not need the .firstRow class. Also it inserts a cloned row only on the table which is parent of the button clicked.

DEMO