JQuery рассчитать НДС на корзину

Question

Я делаю корзину в Symfony, значения рассчитываются корректно Twig, но мне нужно изменить значения, когда кто-то изменит количество товара. Корзина должна быть пересчитана при изменении.

<table class="table table-responsive table-hover" style="display:inline-table!important">
    <thead style="width:100%">
        <tr>
           <th>Nome</th>
           <th>Prezzo</th>
           <th>Qt.à</th>
           <th>IVA</th>
           <th style="width:100px">Totale</th>
           <th style="width:30px"></th>
        </tr>
     </thead>
     <tbody>
        <tr>
            <td>Frusta Pane Glutenfree</td>
            <td>
               <input type="text" disabled="" id="price-2" value="1.45" style="background-color:transparent;border:none!important;width:80px">
            </td>
            <td>
               <input type="number" id="qty-2" step="1" class="form-control text-center form-control-sm" onchange="calPrice(2)" min="1" value="45" style="width: 50px;margin-top: -5px;margin-bottom: -5px;">
            </td>
            <td>
               <input type="text" disabled="" id="vat-2" value="10" style="background-color:transparent;border:none!important;width:80px">%
               <input class="vat" id="calcVat-2" type="hidden" value="6.525">
            </td>
            <td>
               <input type="text" disabled="" class="price" id="total-2" value="65.25" style="background-color:transparent;border:none!important;width:80px">
            </td>
            <td>
               <a href="" class="fas fa-trash text-danger"></a>
            </td>
        </tr>
        <tr>
            <td>Pizza Patate Glutenfree</td>
            <td>
               <input type="text" disabled="" id="price-3" value="1.00" style="background-color:transparent;border:none!important;width:80px">
            </td>
            <td>
               <input type="number" id="qty-3" step="1" class="form-control text-center form-control-sm" onchange="calPrice(3)" min="1" value="25" style="width: 50px;margin-top: -5px;margin-bottom: -5px;">
            </td>
            <td>
               <input type="text" disabled="" id="vat-3" value="10" style="background-color:transparent;border:none!important;width:80px">%
               <input class="vat" id="calcVat-3" type="hidden" value="2.5">
            </td>
            <td>
               <input type="text" disabled="" class="price" id="total-3" value="25.00" style="background-color:transparent;border:none!important;width:80px">
            </td>
            <td>
               <a href="" class="fas fa-trash text-danger"></a>
            </td>
        </tr>
    </tbody>
</table>  

Вот скрипт, который нужно исправить:

function calPrice(id) {
    var qty = $('#qty-' + id).val();
    var price = $('#price-' + id).val();
    var vat = parseFloat($('#calcVat-' + id).val());
    console.log("VAT: " + vat);
    console.log(qty);
    $.ajax({
       method: "POST",
       url: "/shop/ajax/update-price/" + id +"/" + qty
    }).done(function( msg ) {
       var total = (parseFloat(price) * qty).toFixed(2);
       var subtotal = total + vat;
       console.log(total);
       console.log(subtotal);
       $('#total-' + id).val(parseFloat(subtotal).toFixed(2));
       var sum = 0;
       $('.price').each(function() {
           sum += Number($(this).val());
           console.log(sum)
       });
       var vatPrice = ((parseFloat(price) * vat) / 100);
       $('#calcVat-' + id).val(vatPrice);
       $('#subtotal').val((sum).toFixed(2));
       var vat = 0;
       $('.vat').each(function() {
           vat += Number($(this).val());
           console.log(vat);
       })
       $('#vat').val((vat).toFixed(2));
    });
}