Активировать функцию в каждом <tr>>javascript | django [duplicate]

Я не специалист по JS, и у меня возникли трудности с активацией функции для каждой строки таблицы в django-приложении.

Я хотел бы, чтобы каждый раз, когда я нажимаю на item_total, он вычислял введенное значение из item_value * item_qt, но когда я пробую это, это работает только для первой строки

Это мой стол:

<tbody>
    {% for item in contract_items %}
        <tr>
            <td>{{ item }}</td>
            <td><input type="number" style="width: 90px;" placeholder="Item value" id="item_value"></td>
            <td><input type="number" style="width: 90px;" placeholder="Item qt" id="item_qt"></td>
            <td><input type="number" style="width: 90px;" placeholder="Item total" id="item_total" onclick="calculateForm();"></td>
        </tr>
    {% endfor %}
</tbody>

И это мой сценарий:

var calculateForm = function () {
    document.getElementById("item_total").value =
    (
        Number(document.getElementById("item_value").value) *
        Number(document.getElementById("item_qt").value)
    )
};

Вернуться на верх