Функция не работает при создании новой строки в таблице

Question

Я сделал функцию, которая может умножить число 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>

А вот код JavaScript:

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;
}

Я пытался изменить так много вещей, но это не сработало.

Answer 1

Вы не можете дублировать идентификаторы в HTML. Вы можете сохранить номер строки в переменной, которую вы увеличиваете при каждом добавлении новой строки, и использовать эту переменную для генерации идентификаторов:

$(function() {
  let row = 1;

  $('#addRow').click(function() {
    row++;
    let temp_td = '<tr><th scope="row">' + row + '</th><td><label><input type="text" name="name"></label></td><td><label><input type="text" id="price' + row + '" oninput="calculate(' + row + ')"></td><td><input type="text" id="qt' + row + '" oninput="calculate(' + row + ')"></td><td><input type="text" id="ttl' + row + '" name="total"></td><td><button class="remove">-</button></td></tr>';
    $('tbody').append(temp_td)
  });

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<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="price1" oninput="calculate(1)">
                </td>
                <td>
                    <input type="text" id="qt1" oninput="calculate(1)">
                </td>
                <td>
                    <input type="text" id="ttl1" name='total'>
                </td>
                <td>
                    <button class="remove">-</button>
                </td>
            </tr>
            </tbody>
        </table>
        <button id="addRow">+ Add</button>

Вы также можете сделать это с именами, если хотите. Я не делал этого в приведенном выше коде, потому что это несущественно для этого ответа.

В качестве альтернативы, вы можете передать сам элемент в функцию calculate(), а затем найти другие "родственные" элементы, используя jQuery. ,Так что вам вообще не нужны идентификаторы.