JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td></td>
        <td>
        <div>
            <input name="a2c" type="text" size="10" value="3">
            <input id="r" class="rate" name="a2q" type="text" maxlength="255" size="5" value="1">
            <input id="p" class="pack" name="a2p" type="text" maxlength="255" size="5" value="2">
            <span class="amount"></span></div>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
        <div>
            <input name="a3c" type="text" size="10" value="4">
            <input id="r" class="rate" name="a3q" type="text" maxlength="255" size="5" value="5">
            <input id="p" class="pack" name="a3p" type="text" maxlength="255" size="5" value="6">
            <span class="amount"></span></div>
        </td>
    </tr>
</table>

JavaScript

$('input[id=r],input[id=p]').change(function(e) {
        var total = 0;
        var $row = $(this).parent();
        var rate = $row.find('input[id=r]').val();
        var pack = $row.find('input[id=p]').val();

        total = parseFloat(rate * pack);
        //update the row total
        $row.find('.amount').text(total);

        var total_amount = 0;
        $('.amount').each(function() {
            //Get the value
            var am= $(this).text();
            console.log(am);
if (typeof console == "undefined") {
    this.console = {log: function() {}};
}
            //if it's a number add it to the total
            if (IsNumeric(am)) {
                total_amount += parseFloat(am, 10);
            }
        });
        $('.total_amount').text(total_amount);
    });

$(".rate").change();
    
//isNumeric function Stolen from: 
//http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric

function IsNumeric(input) {
    return (input - 0) == input && input.length > 0;
}