How to calculate invoice total amounts of multiple inputs using jquery?

Question

I retrieve all items from order_items table using a foreach loop and then I want to modify quantity and prices of each item.

What I want is to calculate instantly the subtotal and total amount of all items using jQuery but I couldn't find a way to make it work.

$(".price").on('change', function() {
  var subtotal = 0;
  var total = 0;
  var total_ht = $("#total_ht").val();
  var price = $(this).val();
  var id = $(this).attr('data-id');
  var quantity = $("#quantity-" + id).val();

  subtotal = price * quantity;
  total = subtotal + (subtotal * 20 / 100)
  // Single row subtotal
  $("#subtotal-" + id).val(subtotal);
  // Single row total
  $("#total-" + id).val(total);
  // All  rows subtotal
  total_ht = parseFloat(total_ht + subtotal);
  $("#total_ht").val(total_ht);
})


$(".quantity").on('change', function() {
  var subtotal = 0;
  var total = 0;
  var total_ht = $("#total_ht").val();
  var quantity = $(this).val();
  var id = $(this).attr('data-id');
  var price = $("#price-" + id).val();

  subtotal = price * quantity;
  total = subtotal + (subtotal * 20 / 100);
  // Single row subtotal   
  $("#subtotal-" + id).val(subtotal);
  // Single row total
  $("#total-" + id).val(total);
  // All  rows subtotal
  $("#total_ht").val(total_ht);
})

<table>
      <tbody>
        <?php foreach($orderItems as $item): ?>
          <tr>
            <td>
              <input type="number" name="quantity[]" class="quantity" value="<?= $item->quantity ?>" data-id="<?= $item->id ?>" id="quantity-<?= $item->id ?>">
            </td>
            <td>
              <input type="number" name="price[]" class="form-control price" data-id="<?= $item->id ?>" value="<?= $item->unity_price ?>" id="price-<?= $item->id ?>">
            </td>

            <td>
              <input type="number" name="subtotal[]" class="subtotal" data-id="<?= $item->id ?>" value="<?= $item->total_ht_price ?>" id="subtotal-<?= $item->id ?>" readonly>
            </td>

            <td>
              <input type="number" name="total[]" class="total" data-id="<?= $item->id ?>" value="<?= $item->total_ttc_price ?>" id="total-<?= $item->id ?>" readonly>
            </td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>

    <table class="table table-white">
    <tbody>
        <tr>
            <th class="text-left">Total HT
            </th>
            <td class="text-right">
                <input type="number" name="total_ht" id="total_ht" class="form-control total_ht" readonly value="0">
            </td>
        </tr>
        <tr>
            <th class="text-left">TVA
            </th>
            <td class="text-right">
                <input type="number" name="totalTVA" id="totalTVA" class="form-control totalTVA" readonly value="20">
            </td>
        </tr>
        <tr>
            <th class="text-left">Total TTC
            </th>
            <td class="text-right">
                <input type="number" name="totalTTC" id="totalTTC" class="totalTTC" readonly value="0">
            </td>
        </tr>
        
    </tbody>
    </table>