Dynamically add tables and dynamically add rows in them using jQuery

Question

here i am facing the problem when dynamically adding tables and add rows in them dynamically as well. here what i tried: https://jsfiddle.net/753ynxn3/`

$(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>');
      j++;
    });

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

Answer 1

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: https://jsfiddle.net/j2mkL0qp/

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())

Answer 2

$(document).on('click', "#add_row" + j, function() {
    // snip
});

This binds a click event to the document that looks for an element with an ID matching the selector #add_row + j. In your case, j is 1 when the event is bound, so your event delegate will only fire for elements with the id of #add_row1, or the second table in your case. Subsequent tables will not have an "add row" button that matches that selector.

(Incidentally, your "add row" button works for the first table because you have a separate click event bound to the document that matches the selector #add_row0.)

j is incremented like a counter in your event listener's callback, but that won't affect the selector string that the event listener attempts to match: it's bound once when it runs. You will need to make the selector in your event listener more generic so it matches all future elements, by giving them a common class or something like that.

Since the links you generate look like this:

<a id='add_row" + i + "' class='btn btn-default pull-left add_row'>Add Row</a>

You can use .add_row as the selector in your event listener and match them:

$('document').on('click', '.add_row', function(){
    // snip
};

With that code in place, you can get rid of the event listener that's matching #add_row0, too, since the .add_row selector will match it, too.

Here's your fiddle with that update in place.

Answer 3

Adding to the above answer, I have created a fiddle which adds rows on each click. You need to find an alternative to handle numbering of rows though.

    $('document').on('click', '.add_row', function(){
         $(this).siblings('.appendHere').children('table').children('tbody').append($('<tr class="addr"></tr>').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>"));  
         j++;   
    };

https://jsfiddle.net/ghvc0zes/