Добавление кнопки удаления в поля динамического ввода в таблице ⇐ Jquery

[Anonymous]

Я хочу добавить кнопку удаления строки к динамически генерируемым строкам, которая очищает промежуточный итог строки из общего числа, за исключением того, что она не будет отображаться в первой строке (по умолчанию). Я хочу, чтобы она отображалась только в добавленных строках. p>
это мой код в jsfiddle


const makeNum = str => isNaN(str) || str.trim() === "" ? 0 : +str;
window.addEventListener("load", function() {
const table = document.getElementById("dataTable");
const tbody = table.querySelector("tbody");
const grandTotal = document.querySelector("[name=anstotal]");
tbody.addEventListener("input", function(e) {
var sum = 0;
[...tbody.querySelectorAll("tr")].forEach(row => {
const qty = makeNum(row.querySelector("[name=qty]").value);
const price = makeNum(row.querySelector("[name=sel]").value);
const total = qty * price
sum += total;
row.querySelector("[name=total]").value = total.toFixed(2);
})
grandTotal.value = sum.toFixed(2);
})

document.getElementById("add").addEventListener("click", function() {
const rowCount = table.rows.length;
if (rowCount >= 4) {
// limit the user from creating fields more than your limits
alert("Maximum Passenger per ticket is 4.");
return;
}
const newRow = tbody.querySelector("tr").cloneNode(true)
newRow.id = "row"+rowCount;
tbody.appendChild(newRow)
})
})












Quantity




Price

Choose your option
1
2
3
4
5
6
7
8
9
10



Total





add total



Я буду признателен за вашу помощь, спасибо.
Я пытался добавить этот прослушиватель событий, но он не работает
document.getElementById("delete-row").addEventListener("click", function() {
const tableRow = $(this).closest('tr')
const total = +tableRow.find('[name="total"]').val()
const sum = +$('#totalOfTotals').text();
$('#totalOfTotals').text(sum - total);
tableRow.remove();
row--;
})


Подробнее здесь: https://stackoverflow.com/questions/785 ... s-in-table