Umer bin Siddique Umer bin Siddique - 5 months ago 25x
jQuery Question

Dynamically add tables and dynamically add rows in them using jQuery

here i am facing the problem when dynamically adding tables and add rows in them dynamically as well. here what i tried:`

$(document).on('click', "#add_row" + j, function() {
$(this).siblings('.appendHere').children('table').children('tbody').children('#addr' + j).html("<td>" + (j + 1) + "</td><td><input type='text' name='attribute0' placeholder='Attribute' class='form-control'/></td><td><input type='text' name='productId0' placeholder='Product Id' class='form-control'/></td>");
$(this).siblings('.appendHere').children('table').children('tbody').append('<tr id="addr' + (j + 1) + '"></tr>');

its working for with adding tables when i add 3rd table and click on add row in this table that is stuck.


the problem is, when you click every time on add row button the value of j is incrementing and changing, on other hand when you click on add table the value of j is not reset for new table. we need to reset the value of variable j. here is your updated fiddle:

i have done this main update:

 j = parseInt($(this).siblings('.appendHere').children('table').children('tbody').children('tr:nth-last-child(2)').children('td:first-child').text())