How can I sum a dynamically added table column 'amount'

See more:

Javascript

HTML

PHP

jQuery

i created a html/php page to calculate a bill. i have an option select for the products, that populates from mysql database, when i select a product it will supply the corresponding price. i a have a text box beside it with amount textbox. when i select a product, and enter the quantity, onkeyup event, the amount textbox gets its value. these input values are passed to the corresponding table cells by a button click 'add'.
The problem is that the sum of the amount column does not addup as the user click the add button.
Here is what i have tried:

Thanks for helping me.

What I have tried:

<div class="row mb-3">
        <div class="col-md-4">
            <label class="control-label">Drugs/Services</label>
            <select name="product" id="product" class="custom-select browser-default select2" >
                <option value="" selected></option>
            <?php
            $cat = $conn->query("SELECT * FROM category_list order by category asc");
                while($row=$cat->fetch_assoc()):
                    $cat_arr[$row['id']] = $row['category'];
                endwhile;
            $product = $conn->query("SELECT * FROM medicine  order by description asc");
            while($row=$product->fetch_assoc()):
                $prod[$row['id']] = $row;
            ?>
                <option value="<?php echo $row['id'] ?>" data-description="<?php echo $row['description'] ?>" data-price="<?php echo $row['priceprivate'] ?>"><?php echo $row['description'] ?></option>

            <?php endwhile; ?>
            </select>
        </div>
        <div class="col-md-2">
            <label class="control-label">Qty:</label>
            <input type="number" class="form-control text-right" step="any" id="qty"  style="width:50px;" onfocus="this.value=''" onkeyup="cal_amt();" >
        </div>
        <div class="col-md-2">
            <label class="control-label">Price:</label>
            <input type="number" class="form-control text-right" name="price" id="price">
        </div>
        <div class="col-md-2">
                <label class="control-label">Amount:</label>
                <input type="number" class="form-control text-right" name="amount" id="amount">
        </div>
        <div class="col-md-2">
            <label class="control-label">   </label>
            <button class="btn btn-block btn-primary" type="button" id="add_to_list" onclick="addlist();" style="width:50px;">class="fa fa-plus"> </button>
        </div>
</div>

<div class="row">
    <table id="list" class="table table-bordered" >
        <colgroup>
            <col width="40%">
            <col width="10%">
            <col width="20%">
            <col width="25%">
            <col width="10%">
        </colgroup>
        <thead>
            <tr>
                <th class="text-center">Drug/Services</th>
                <th class="text-center">Qty</th>
                <th class="text-center">Price</th>
                <th class="text-center">Amount</th>
                <th class="text-center">action</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <th class="text-right" colspan="3">Total</th>
                <th class="text-right tamount"></th>
                <th></th>
            </tr>

        </tfoot>
    </table>
</div>

here is the javascript code that creates and inserts the values from the :
textboxes to the table:

function addlist () {
  
  const prod = $("#product option:selected").text();
  const qty = document.getElementById('qty').value;
  const price = document.getElementById('price').value;
  const amnt = document.getElementById('amount').value;
  const tbody = document.querySelector('#list tbody');
  tbody.appendChild(createRow(prod, qty, price, amnt));
  cal_amt()
  

}

function createRow(prod, qty, price, amnt) {
  const tr = document.createElement('tr');
  tr.appendChild(createTd(prod));
  tr.appendChild(createTd(qty));
  tr.appendChild(createTd(price));
  tr.appendChild(createTd(amnt)); 

  return tr;
}

function createTd(value) {
  const td = document.createElement('td');
  td.innerText = value;
  return td;

}

here is the sum code:

	function cal_amt(){
		var pval = document.getElementById("price").value;
		var qty = document.getElementById("qty").value;	
		var amt = parseFloat(qty) * parseFloat(pval);
		document.getElementById("amount").value = amt
		tot+=parseFloat(amt);
		$('[name="tamount"]').val(tot)
		$('#list .tamount').html(parseFloat(tot).toLocaleString('en-US',{style:'decimal',maximumFractionDigits:2,minimumFractionDigits:2}))

	}

Please any help will be appreciated...Thanks