Using same JS function for multiple HTML tables?

Question

I have function which adds and delete rows of a table on click of a button ie add_row . Now i have multiple tables and for which i want to use the same function on the same page.

So below function is for table1, how do i reuse the same function for table2,table3.. etc? Each table will have its own add_row button ie, add_row,add_row1, add_row2 etc..

 <script type="text/javascript">
        $(document).ready(function() {
        var rowIdx = 0; 
        $('#add_row').on('click', function () { 
            $.each($("#table1  tr"), function() {
                if (parseInt($(this).data("id")) > rowIdx) {
                    rowIdx = parseInt($(this).data("id"));
                    console.log(rowIdx)
                }
            });
            rowIdx++;
            $('#table1').append(`<tr id="addr${rowIdx}" data-id="${rowIdx}" class="hidden">
                                <td data-name="id">
                                    <input type="text" name='id${rowIdx}'  placeholder='ID' value=""`); 
       
        });
        $('#table1').on('click', '.remove', function () { 
                var child = $(this).closest('tr').nextAll(); 
                child.each(function () { 
                    var id = $(this).attr('id'); 
                    var idx = $(this).children('.row-index').children('p');  
                    var dig = parseInt(id.substring(4)); 
                    idx.html(`Row ${dig - 1}`); 
                    $(this).attr('id', `addr${dig - 1}`); 
                }); 
                $(this).closest('tr').remove(); 
                rowIdx--; 
                }
            ); 
        });

</script>

Answer 1

You mean this?

Don't add and subtract from rowIndex. It is different per table. Use the actual number of rows in the specific table

$(function() {
  $('.add_row').on('click', function() {
    const $table = $(this).closest("table");
    const $rows = $table.find("tr");
    let rowIndex = $rows.length;
    $table.append(`<tr id="addr${rowIdx}" data-id="${rowIdx}" class="hidden">
    <td data-name="id"><input type="text" name='id${rowIdx}'  placeholder='ID' value=""</td></tr>`);
  });
  $(document).on('click', '.remove', function() {
    var child = $(this).closest('tr').nextAll();
    child.each(function() {
      var id = $(this).attr('id');
      var idx = $(this).children('.row-index').children('p');
      var dig = parseInt(id.substring(4));
      idx.html(`Row ${dig - 1}`);
      $(this).attr('id', `addr${dig - 1}`);
    });
    $(this).closest('tr').remove();
  });
});