JQuery multiply input values of table rows in AJAX

Question

I want to calculate each row's total price by multiplying individual row's inputs and then finally calculate a grand total by adding all the total values of the Total column using JQuery. I am only getting the first row to display total when I enter values. Any help will be greatly appreciated.

blade

@foreach($service->invoices as $invoice)
    <tr>
        <td class="text-right">{{ $invoice->description }}</td>
        <td>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
                <label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
            </div>
        </td>
        <td>
            <div class="form-row justify-content-center">
                <div class="form-group mb-0">
                    <div class="input-group mx-auto mb-0">
                        <div class="number-input amount">
                            <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" id="decrease"></button>
                            <input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
                            <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus" id="increment"></button>
                        </div>
                    </div>
                </div>
            </div>
        </td>
        <td class="price">{{ $invoice->price }}</td>
        <td class="total">0</td>
    </tr>
@endforeach

script

<script>
    $("#decrease , #increment , .quantity").on("click input", function() {
        var selectors = $(this).closest('tr'); //get closest tr
        var quantity = selectors.find('.quantity').val(); //get qty
        if (!quantity || quantity < 0)
            return;
        var price = parseFloat(selectors.find('.price').text());
        var total = (price * quantity);
        selectors.find('.total').text(total); //add total
        mult += total;
        $("#grandTotal").text(mult);
    })
</script>

Answer 1

You need to loop through tr to get value of total in each td and then check if the value is not empty and depending on this add that value to mult .Also , you need to use class instead of id change your query selector according to that i.e : .increment and .decrease.

Demo Code :

$(".decrease , .increment , .quantity").on("click input", function() {


  var selectors = $(this).closest('tr'); //get closest tr
  var quantity = selectors.find('.quantity').val(); //get qty
  if (!quantity || quantity < 0)
    return;
  var price = parseFloat(selectors.find('.price').text());
  var total = (price * quantity);
  selectors.find('.total').text(total); //add total
  var mult = 0;
  //loop through trs
  $("tr").each(function() {
    //get total value check its not "" else give value =0 to avoid Nan error
    var total = $(this).find(".total").text() != "" ? $(this).find(".total").text() : 0;
    mult = parseFloat(total) + mult;

  })
  //add value to div
  $("#grandTotal").text(mult);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="text-right">A</td>
    <td>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
        <label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
      </div>
    </td>
    <td>
      <div class="form-row justify-content-center">
        <div class="form-group mb-0">
          <div class="input-group mx-auto mb-0">
            <div class="number-input amount">
              <!--just add class-->
              <button class="minus decrease" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease">-</button>
              <input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
              <button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus increment" id="increment">+</button>
            </div>
          </div>
        </div>
      </div>
    </td>
    <td class="price">13
      <td class="total"></td>
  </tr>
  <tr>
    <td class="text-right">B</td>
    <td>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
        <label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
      </div>
    </td>
    <td>
      <div class="form-row justify-content-center">
        <div class="form-group mb-0">
          <div class="input-group mx-auto mb-0">
            <div class="number-input amount">
              <!--just add class-->
              <button class="minus decrease" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease">-</button>
              <input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
              <button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus increment" id="increment ">+</button>
            </div>
          </div>
        </div>
      </div>
    </td>
    <td class="price">135
      <td class="total"></td>
  </tr>
</table>
Grand Total :
<div id="grandTotal">0</div>