Fetch values from mysql using php into dynamic add/remove input fields having some calculations

Question

I'm trying to fetch values from mysql to a dynamically add/remove input table fields (edit.php). I'm successfull in fetching all the values, but my calculation are not updated automatically.

This works like charm during the insert process to mysql(add.php)

So initially user enters all the values in the the table using add.php and the values are successfully inserted in to the database. Now I have an option for users to edit the entered values.

The user clicks on edit.php and the form opens for editing with all the dynamic inputs. its basically a cost calculation table which will calculate the amount automatically. My problem is when i fetch the values from mysql with php while loop I'm able to get the values but the calculation seems not working Now when I edit and change the fetched above values manually, I'm able to get the calculated amount

My PHP

<table class="table table-hover" id="product">
  <thead>
     <tr>
       <th>#</th>
       <th class="col-sm-2">Item<span class="text-danger">*</span></th>
       <th class="col-md-6">Description<span class="text-danger">*</span></th>
       <th>Unit Cost<span class="text-danger">*</span></th>
       <th>Qty<span class="text-danger">*</span></th>
       <th>Amount</th>
       <th></th>
     </tr>
   </thead>
   <tbody>
   <?php 
        $stmt           = $link->prepare("SELECT * FROM product WHERE productid=?");
        $stmt           -> bind_param('s', $productid);
        $stmt           -> execute();
        $stmtresult     = $stmt->get_result();
        $count          = 0;
        $numberofrows = $stmtresult->num_rows;
        while($row = $stmtresult->fetch_assoc())
        {
            $no             = $row["no"];
            $items          = $row["item"];
            $description    = $row["description"];
            $unitcost       = $row["unitcost"];
            $est_qty        = $row["qty"];
            $amount         = $row["amount"];
            $totalamount    += $amount;
            $countreg       = ++$count;
            $grossamount = ($totalamount-$discountamount)+$taxamount; //I have declared $discoutamount, $taxamount elsewhere. This does not matter
        ?>
        <input type="hidden" value="<?php echo $numberofrows; ?>" id="rowcount">
         <tr id="row<?php echo $countreg; ?>">
            <th scope="row"><a href=""><?php echo $countreg; ?></a></th>
            <td><input class="form-control item" type="text" name="item[]" value="<?php echo $items; ?>"></td>
            <td><input class="form-control description" type="text" name="description[]" value="<?php echo $description;?>"></td>
            <td><input class="form-control unitcost" type="text" name="unitcost[]" value="<?php echo $unitcost; ?>"></td>
            <td><input class="form-control qty" type="text" name="qty[]" value="<?php echo $qty; ?>"></td>
            <td><input class="form-control amount" readonly name="amount[]" value="<?php echo $amount; ?>"></td>
            <td><?php if($countreg==1){ ?><a class="text-success font-18" title="Add" id="add"><i class="fa fa-plus"></i></a><?php }else{ ?><a class="text-danger font-18 btn_remove" title="Remove" name="remove" id="<?php echo $countreg; ?>"><i class="fas fa-trash-alt"></i></a> <?php } ?></td>
          </tr>
    <?php } ?>
 </tbody>

My Jquery

<script>
$(document).ready(function(){  
  var i=$('#rowcount').val();
  $('#add').click(function(){  
    i++;  
    $('#product').append('<tr id="row'+i+'"><th scope="row"><a href="">'+i+'</a></th><td><input class="form-control item" type="text" name="item[]"></td><td><input class="form-control description" type="text" name="description[]"></td><td><input class="form-control unitcost" type="text" name="unitcost[]"></td><td><input class="form-control qty" type="text" name="qty[]"></td><td><input class="form-control amount" readonly type="text" name="amount[]"></td><td><a class="text-danger font-18 btn_remove" title="Remove" name="remove" id="'+i+'"><i class="fas fa-trash-alt"></i></a></td></tr>');  
    });  
    $(document).on('click', '.btn_remove', function(){  
         var button_id = $(this).attr("id");   
         $('#row'+button_id+'').remove();  
    });   
});  

$("table").on("change", "input", function () {  //use event delegation
  var tableRow = $(this).closest("tr");  //from input find row
  var one = Number(tableRow.find(".unitcost").val());  //get first textbox
  var two = Number(tableRow.find(".qty").val());  //get second textbox
  var total = one * two;  //calculate total
  tableRow.find(".amount").val(total);  //set value

    function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".amount").each(function () {

        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }

    });

}
                $("table").change(".amount", function () {
    calculateSum();         

});
});

 </script>

I hope I'm clear with my question. Appreciate your help and response

Answer 1

I found it myself. I have updated my Jquery for the line below

$("table").on("change", "input", function () { 

to

$("table").on("change paste keyup", "input", function () { 

furthur, my total value was not updating once i delete a dynamic row. So i updated the Script in the remove button function.

$(document).on('click', '.btn_remove', function(){  
    var button_id = $(this).attr("id");   
    $('#row'+button_id+'').remove(); 
    $(".Total").trigger("change");
});