How to delete line and update totals in Javascript

Question

Here is what I'm trying to do.

I'm trying to delete a line item and update the order with the current code:

The HTML code:

<div class="invoice-billing">
    <div class="invoice-billing-item"><input type="text" class="form-control" id="sku-%ID%" name="sku-%ID%" /></div>
    <div class="invoice-billing-item"><input type="text" class="form-control" id="description-%ID%" name="description-%ID%" /></div>
    <div class="invoice-billing-item">
        <label class="switch" for="taxable-%ID%" style="margin-left: 4px; top: 4px;">
            <input type="checkbox" class="taxable-%ID%" name="taxable-%ID%" id="taxable-%ID%" />
            <div class="slider round gray"></div>
        </label>
    </div>
    <div class="invoice-billing-item"><input type="text" onchange="updateInvoiceValue()" class="form-control invoice-billing-qty" id="qty-%ID%" name="qty-%ID%" /></div>
    <div class="invoice-billing-item"><input type="text" onchange="updateInvoiceValue()" class="form-control invoice-billing-unit-price" id="unit-price-%ID%" name="unit-price-%ID%" /></div>
    <div class="invoice-billing-item invoice-billing-item-ext-price">
        <div id="ext-%ID%"></div>
    </div>
    <a class="invoice-billing-item-trash" id="del-%ID%" name="del-%ID%" onchange="updateInvoiceValue()"><i class="fas fa-trash-alt"></i></a>
</div>

Here is the JavaScript code:

function updateInvoiceValue() {
    for (var i = 1; i < newInvoiceIndex; ++i) {
        $("#del-" + i).on("click", function () {
            var quantity = parseInt($("#qty-" + i).val());
            var unitPrice = Number($("#unit-price-" + i).val());
        });
    }
}

The problem is that I'm getting a NaN on the numeric fields even though there is a value on the field. How can I get the values of the numeric fields and remove an line item? I pretty much know how to update the totals

Thank you...