Javascript 在表上创建新行时函数不起作用

我有一个html表，当用户单击按钮时，我会在其中动态添加行。我的表中每行的两个单元格的编号应相乘。我制作了一个可以将2个单元格的数字相乘的函数，但当我通过按

添加按钮创建新行时，该函数在新行上不起作用，它总是在表的第一行上起作用

这里是HTML代码：

<div class="table-responsive container">
    <table class="table">
        <thead class="dark">
        <tr>
            <th scope="col">SL.</th>
            <th scope="col">Item Description</th>
            <th scope="col">Price</th>
            <th scope="col">Qty.</th>
            <th scope="col">Total</th>
            <th scope="col">Del</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td><label>
                <input type="text" name="name">
            </label>
            </td>
            <td><label>
                <input type="text" id="price" oninput="calculate()">
            </td>
            <td>
                <input type="text" id="qt" oninput="calculate()">
            </td>
            <td>
                <input type="text" id="ttl" name='total'>
            </td>
            <td>
                <button class="remove">-</button>
            </td>
        </tr>
        </tbody>
    </table>
    <button id="addRow">+ Add</button>
</div>

let temp_td = '<tr>' +
    '<th scope="row">1</th>' +
    '<td><label><input type="text" name="name"></label></td>' +
    '<td><label><input type="text" id="price" oninput="calculate()"></td>' +
    '<td><input type="text" id="qt" oninput="calculate()"></td>' +
    '<td><input type="text" id="ttl" name="total"></td>' +
    '<td><button class="remove">-</button></td>' +
'</tr>';

$(function () {
    $('tbody').sortable();

    $('#addRow').click(function () {
        $('tbody').append(temp_td)
    });

    $(document).on('click', '.remove', function () {
        $(this).parents('tr').remove();
    });

    $('#getValues').click(function () {
        const total = [];
        let sum = 0;
        $('input[name="total"]').each(function (i, elem) {
            total.push($(elem).val())
        });
        for (let i = 0; i < total.length; i++) {
            sum += Number(total[i])
        }
        console.log(total.join(','));
        console.log(total);
        console.log(sum);
        document.getElementById('subtotal').innerHTML = sum;
        document.getElementById('total').innerHTML = sum + (sum * 5 / 100);

        // document.getElementById('total22').innerHTML = sum;
    })

});
function calculate() {
    var price = document.getElementById('price').value; 
    var qt = document.getElementById('qt').value;
    var ttl = document.getElementById('ttl');   
    var multiply = price * qt;
    ttl.value = multiply;
}


SL。
项目说明
价格
数量。
全部的
德尔
1.
-
+加

下面是JavaScript代码：

<div class="table-responsive container">
    <table class="table">
        <thead class="dark">
        <tr>
            <th scope="col">SL.</th>
            <th scope="col">Item Description</th>
            <th scope="col">Price</th>
            <th scope="col">Qty.</th>
            <th scope="col">Total</th>
            <th scope="col">Del</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td><label>
                <input type="text" name="name">
            </label>
            </td>
            <td><label>
                <input type="text" id="price" oninput="calculate()">
            </td>
            <td>
                <input type="text" id="qt" oninput="calculate()">
            </td>
            <td>
                <input type="text" id="ttl" name='total'>
            </td>
            <td>
                <button class="remove">-</button>
            </td>
        </tr>
        </tbody>
    </table>
    <button id="addRow">+ Add</button>
</div>

let temp_td = '<tr>' +
    '<th scope="row">1</th>' +
    '<td><label><input type="text" name="name"></label></td>' +
    '<td><label><input type="text" id="price" oninput="calculate()"></td>' +
    '<td><input type="text" id="qt" oninput="calculate()"></td>' +
    '<td><input type="text" id="ttl" name="total"></td>' +
    '<td><button class="remove">-</button></td>' +
'</tr>';

$(function () {
    $('tbody').sortable();

    $('#addRow').click(function () {
        $('tbody').append(temp_td)
    });

    $(document).on('click', '.remove', function () {
        $(this).parents('tr').remove();
    });

    $('#getValues').click(function () {
        const total = [];
        let sum = 0;
        $('input[name="total"]').each(function (i, elem) {
            total.push($(elem).val())
        });
        for (let i = 0; i < total.length; i++) {
            sum += Number(total[i])
        }
        console.log(total.join(','));
        console.log(total);
        console.log(sum);
        document.getElementById('subtotal').innerHTML = sum;
        document.getElementById('total').innerHTML = sum + (sum * 5 / 100);

        // document.getElementById('total22').innerHTML = sum;
    })

});
function calculate() {
    var price = document.getElementById('price').value; 
    var qt = document.getElementById('qt').value;
    var ttl = document.getElementById('ttl');   
    var multiply = price * qt;
    ttl.value = multiply;
}

let temp_td=''+
'1' +
'' +
'' +
'' +
'' +
'-' +
'';
$（函数（）{
$（'tbody'）.sortable（）；
$（'#addRow'）。单击（函数（）{
$（'tbody'）。追加（临时）
});
$（文档）.on（'单击'，'.remove'，函数（）{
$（this.parents（'tr'）.remove（）；
});
$（'#getValues'）。单击（函数（）{
常量总数=[]；
设和=0；
$（'input[name=“total”]”）。每个（函数（i，elem）{
total.push（$（elem.val（））
});
for（设i=0；i

我试图更改很多内容，但都不起作用。
不能在HTML中复制ID。您可以将行号保存在一个变量中，该变量在每次添加新行时递增，并使用该变量生成ID：


$（函数（）{
设row=1；
$（'#addRow'）。单击（函数（）{
行++；
设temp_td=''+row+'-'；
$（'tbody'）。追加（临时）
});
$（文档）。在（'单击'，'删除'，函数（）上）{
$（this.parents（'tr'）.remove（）；
});
});
函数计算（r）{
var price=document.getElementById（'price'+r）.value；
var qt=document.getElementById（'qt'+r）.value；
var ttl=document.getElementById（'ttl'+r）；
var乘数=价格*qt；
ttl.value=乘法；
}

SL。
项目说明
价格
数量。
全部的
德尔
1.
-
+Add
每次添加新行时，代码中都会出现重复ID的情况，这是不可能的。现在我该怎么办？我怎样才能用新ID创建新行？哇，谢谢，先生。这帮了我很多忙。我试了很多，但在这里你帮了我很多忙。谢谢。我应该是临时工@罗布同意：-）我还有一个关于行数的小问题。那么，您是否应该在此处创建新的帖子或评论？行计数从1开始，但如果删除任何行，它将再次从1开始计数。