Необходимо скопировать скрипт для дополнительной таблицы, не влияя на исходный скрипт

Question

У меня есть две таблицы, к которым я хочу иметь возможность динамически добавлять и удалять строки, которые используют разные сценарии, но являются одинаковыми. Как я могу изменить второй скрипт, чтобы он мог вносить изменения во вторую таблицу, а не в первую?

Таблица:

<table id="myTable" class=" table order-list">
    <thead>
    <tr>
        <td>Numbers</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="col-sm-4">
            <input type="text" name="number[]" class="form-control"/>
        </td>
        <td class="col-sm-4"><a class="deleteRow"></a>
        </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="0" style="text-align: left;">
            <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Another Number"/>
        </td>
    </tr>
    </tfoot>
</table>

Сценарий:

<script>

$(document).ready(function () {
    var counter = 0;

$("#addrow").on("click", function () {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="number min="1"" class="form-control" name="step_number[]' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="step_description[]' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
});

$("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();       
    counter -= 1
});

});

</script>

Answer 1

вы должны сделать то же самое, что и в строке delete.

вместо

 $("table.order-list").append(newRow);

вы можете сделать

 $(this).closest("table.order-list").append(newRow);

и добавить класс для добавления кнопка вместо использования идентификатора