JSFiddle - React, Tailwind, and code Playground

HTML

<table id="cart">
    <tr>
        <th>Select</font>
        </th>
        <th>Item Desc</th>
        <th>Item Specification</th>
        <th>Item Rate</th>
        <th>Qty Intented</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="sel" />
        </td>
        <td>Soap</td>
        <td>each</td>
        <td>19.27</td>
        <td>
            <input type="text" name="qty" class="toAdd" id="qty" value="0" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="sel" />
        </td>
        <td>Dettol</td>
        <td>each</td>
        <td>40.25</td>
        <td>
            <input type="text" name="qty" class="toAdd" id="qty" value="0" />
        </td>
    </tr>
</table>
<br />
<input id="calculateTotal" type="button" value="Get Total" />
<input type="text" id="total" />

JavaScript

$(function () {
    $('#calculateTotal').click(function () {
        var total = 0;
        $('#cart tr:gt(0)').each(function () {
            total += parseFloat($(this).find('td:eq(3)').text()) * parseFloat($(this).find('input:last').val());
        });
        
        // round to 2 decimal places
        total = parseInt(total * 100) / 100;

        // display total in textbox
        $('#total').val(total);
    });
    
    $('#cart').on('keyup', '.toAdd', function() {
        $(this).val( $(this).val().replace(/[^0-9]/, '') );
    });
});