How to auto calculate the html table using jQuery?

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!