How to auto calculate the html table using jQuery?

[yadao200011]

Can someone or anybody help me on how to auto calculate total price in the table? Please see the image below:

Here's my code (I will included only the code that I used in the Image:

HTML:

 <div class="col-12">
      <div class="col drop">
        <table name="services">
          <tr name="services">
            <td>
              <select class="form-control serv" name="txt-service" id="txt-service">    //dynamic services (from database)
                <option value="" readonly>--- Select Service ---</option>
                   <?php include "include/connect.php";
                     $sql="SELECT service_id,services,price FROM tbl_serviceoffered";
                        foreach ($con->query($sql) as $row){
                         echo "<option value=$row[service_id] data-price=$row[price] data-service=$row[services]>$row[services]</option>";
                        }
                         echo "</select>";
                    ?>
             </td>
             <td><input type="hidden" style="text-align:right" class="form-control" name="service" id="showservice" readonly></td>
             <td><input type="text" style="text-align:right" class="form-control" name="price" id="showprice" readonly></td>
             <td><input type="text" style="text-align:right" class="form-control" name="item_total" id="item_total"></td>
             <td><button class="btn btn-primary" name="add">Add</button></td>
          </tr>
        </table>
       </div>
    </div>  

    <div class="table-responsive">
      <table class="table table-hover table-bordered table-striped" name="transactions" id="transactions">
        <thead>
         <th></th>
         <th style="text-align:center">Service Name</th>
         <th style="text-align:center">Service Price</th>
         <th style="text-align:center">Service Total</th>
        </thead>
        <tbody>
         </tbody>
       </table>
        <td colspan="2" class="tr">&nbsp;</td>
          <div class="text-right">
            <tr>
             <td><b>Total</b></td>
             <td colspan="2" style="text-align: right"><input class="form-control input-sm" style="width:300px;margin-left:auto" style="text-align:right; font-weight:bold" class="form-control" name="grand_total" id="grand_total" placeholder="Total"></td>
            </tr>
            <tr>
              <td>Cash Tendered</td>
               <td colspan="2" style="text-align: right"><input class="form-control input-sm" style="width:300px;margin-left:auto" type="text" name="cashtendered" placeholder="Cash Tendered"></td>
             </tr>
              <tr>
                <td>Change</td>
                <td colspan="2" style="text-align: right"><input class="form-control input-sm" style="width:300px;margin-left:auto" type="text" name="change" placeholder="Change"></td>
           </div> &nbsp;           
         </div>
       </div>

       <div class="text-right">
          <button type="button" class="btn btn-primary btn-icon icon-right" name="btnSaveTransaction" id="btnSaveTransaction"><i class="fas fa-file-invoice"></i> Process Payment</a>
       </div

JS:

var id = 1; 


     /*Assigning id and class for tr and td tags for separation.*/
        $("button[name=add]").click(function() {
            var newid = id++; 
        $("table[name=transactions]").append('<tr id="'+newid+'">\n\
            <td style="text-align:center;"><a class="btn btn-primary" href="javascript:void(0);" id="remove">Remove</a></td>\n\
            <td width="100px" style="display:none;">' +newid+ '</td>\n\
            <td style="text-align:center; display:none;" class="num'+newid+'">' + $("#txt-transact_num").val() + '</td>\n\
            <td style="text-align:center; display:none;" class="date'+newid+'">' + $("#txt-transact_date").val() + '</td>\n\
            <td style="text-align:center; display:none;" class="patientid'+newid+'">' + $("#txt-patient_id").val() + '</td>\n\
            <td style="text-align:center;" class="serv'+newid+'">' + $("#showservice").val() + '</td>\n\
            <td style="text-align:center; display:none;" class="servid'+newid+'">' + $(".serv option:selected").val() + '</td>\n\
            <td style="text-align:right;" class="price'+newid+'">₱' + $("#showprice").val() + '</td>\n\
            <td style="text-align:right;" name="txt" class="totalprice'+newid+'">₱' + $("#item_total").val() + '</td>');

            $("#txt-service").val("");
            $("#showprice").val("");
            $("#item_total").val("0.00");

            calculateSum();
        });

        function calculateSum() {
            var sum = 0;
            //iterate through each textboxes and add the values
            $("tbody").each(function () {
                //add only if the value is number
                if (!isNaN(this.value) && this.value.length != 0) {
                    sum += parseFloat(this.value);
                }
            });
            //.toFixed() method will roundoff the final sum to 2 decimal places
            $("#grand_total").val(sum.toFixed(2));
        }

        $("#transactions").on('click', '#remove', function() {
            $(this).parent().parent().remove();
            calculateSum();
        });

    I'm still new in this programming language I hope everyone can help me for our Capstone Project. Thank you!

[Dani]

What isn't working as intended? I see that you are using javascript to calculate the sum if you add a new service, or if you click the remove button. Are those not working as expected? The initial sum should just be set via PHP based on what exists in the database at the start of the page loading.

[k99rs]

the selector that you are using to calculate the sum should be.

$("tbody tr").each(function() {
    // Search for the cell with the dollar value
});

The above code will allow you to traverse through all rows.