JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table id="myTable">
    <thead>
        <tr><th>Product name</th><th>Qty</th><th>Price</th>
    <th align="center"><span id="amount" class="amount">Amount</span> </th></tr>
    </thead>
    <tbody>
    
    <tr>
	<td>Product 1</td><td><input type="text" class="qty" name="qty"></td>
	<td><input type="text" value="11.60" class="price"></td>
	<td align="center"><input type="text" class="amount" id="amount"></td>
	</tr>

<tr><td>Product 2</td><td><input type="text" class="qty" name="qty"></td>
<td><input type="text" value="15.26" class="price"></td>
<td align="center"><input type="text" class="amount" id="amount"></td></tr>

<tr><td></td><td></td>
<td align="right">TOTAL</td>
<td><input type="text" class="total" id="total"></td></tr>
</tbody></table>

JavaScript

$(document).ready(function(){

    update_amounts();
    $('.qty').change(function() {
        update_amounts();
    });
function update_amounts()
{
    var sum = 0.0;
    $('#myTable > tbody  > tr').each(function() {
    	if($(this).find('.qty').val() != '' && $(this).find('.qty').length  != 0 ) {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var amount = (qty*price);
        if(amount)sum += amount;
        $(this).find('.amount').val(amount);
    	}
    });
    //just update the total to sum  
    $('.total').val(sum);
}
});//]]>