Select checkbox and update return invoice

I want to create a return invoice. I take the data from sql, and I have the possibility to change the quantity of each product that I want to return. In the image you can see that I selected record 2 and 4, but the script takes the first 2 records in ascending order and does the calculation for me.

I leave the script in php and js below, so you can help me correct it. I want to understand what I didn't do well.

cal_final_total(count) is for calculate quantity price and tax

Thank you in advance for the answers.

$(document).on('change', function stornSelectedProducts() {
  var checkboxes = document.querySelectorAll('.checkbox');
  var count = 0;

  checkboxes.forEach(function(checkbox) {
    if (checkbox.checked) {
      count++;
      $('#total_item').val(count);
    }
  });
  cal_final_total(count);
});
update();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th width="1%">#</th>
      <th width="10%">Product code</th>
      <th width="40%">Description <span class="text-danger font-weight-bold">*</span></th>
      <th width="6%">Unit <span class="text-danger font-weight-bold">*</span></th>
      <th width="10%">QTY<span class="text-danger font-weight-bold">*</span></th>
      <th width="8%">Price <span class="text-danger font-weight-bold">*</span></th>
      <th width="8%">Price without VAT</th>
      <th width="8%">VAT</th>
      <th width="10%">Total with VAT</th>
      <th align="center"><input id="checkAll" class="form-control" type="checkbox" </th>
    </tr>
  </thead>
  @php($count = 0) @foreach($invoice as $row) @php($count++)
  <tbody>
    <tr>
      <td><span id=""></span></td>
      <td><input type="text" value="" name="item_product_code[]" id="item_product_code" class="form-control" readonly></td>
      <td><input type="text" value="" name="item_description[]" id="item_description" class="form-control" readonly></td>
      <td><input type="text" value="" name="item_unit[]" id="item_unit" class="form-control" readonly></td>
      <td><input type="text" value="" name="item_quantity[]" id="item_quantity" class="form-control"></td>
      <td><input type="text" value="" name="item_rate[]" id="item_rate" class="form-control" readonly></td>
      <td><input type="text" value="" name="item_actual_amount[]" id="item_actual_amount" class="form-control" data-srno="" readonly></td>
      <td><input type="text" value="" name="item_vat_amount[]" id="item_vat_amount" class="form-control" data-srno="" readonly></td>
      <td><input type="text" value="" name="item_final_amount[]" id="item_final_amount" class="form-control" data-srno="" readonly></td>
      <td align="center"><input class="checkbox" id="" type="checkbox" onChange="stornSelectedProducts()"></th>
    </tr>
  </tbody>
  @endforeach
</table>

<div class="row">
  <div class="col-xl-8 col-md-6 col-sm-6">
  </div>
  <div class="col-xl-4 col-md-6 col-sm-6">
    <table class="table table-hover">
      <tr>
        <td width=50%><input type="text" class="form-control" value="Total without VAT" readonly></td>
        <td width=50%><input type="text" name="total_amt_vat_0_val" class="form-control" value="0.00" id="total_amt_vat_0_val" readonly></td>
      </tr>
      <tr>
        <td width=50%><input type="text" class="form-control" value="VAT" readonly></td>
        <td width=50%><input type="text" name="total_amt_vat_val" class="form-control" value="0.00" id="total_amt_vat_val" readonly></td>
      </tr>
      <tr>
        <td width=50%><input type="text" class="form-control" value="Total with VAT" readonly></td>
        <td width=50%><input type="text" name="total_amt_val" class="form-control" value="0.00" id="total_amt_val" readonly></td>
      </tr>
      <tr>
      </tr>
    </table>
  </div>
</div>