JSFiddle - React, Tailwind, and code Playground

HTML

<body><form action="submit.php" name="main" method="post">
<table style="border-collapse: collapse;" border="0" align="center" width="50%" class="horiz" id="customersAdd">
   <tr>
     
     <td align="center"><br/>
     <input class="text" style="width:100%" type="button" id="addnew" align="middle"value="Add Aditional Row" /></td>
   </tr>
    <tr align="center">
    
     <td>
       <br />
       <input placeholder="Quantity" type="text" name="quantity1" id="quantity1" class="qty form-input-rate" />
       <br /></td>
     <td>
       <br />
       <input placeholder="Description" type="text" name="description1" id="description1" />
       <br /></td>
     <td>
       <br />
       <input placeholder="Rate" type="text" name="rate1" id="rate1"  class="rate form-input-rate"/>
       <br /></td>
     <td>
       <br />
       <input placeholder="Amount" type="text" name="amount1" id="amount1" readonly="true" class="cal form-input-rate" />
       <br /></td>
</tr>

 </table>
</body>

JavaScript

var currentItem = 1;

$('#customersAdd').on('keyup', '.quantity, .rate, .amount', calculateRow);

$('#addnew').click(function() {
    currentItem++;
    
    $('#customersAdd').append('<tr><td><input placeholder="Quantity" type="text" name="quantity' + currentItem +'" id="quantity' + currentItem +'" class="qty form-input-rate" /></td><td><input placeholder="Description" type="text" name="description' + currentItem +'" id="description' + currentItem +'" class="form-input-rate"/></td><td><input placeholder="Rate" type="text" name="rate' + currentItem +'" id="rate' + currentItem +'" class="rate form-input-rate"/></td><td><input placeholder="Amount" type="text" name="amount' + currentItem +'" id="amount' + currentItem +'" class="cal form-input-rate"/></td></tr>'
    );
});

function calculateSum() {
    var sum = 0;
    $(".cal").each(function () {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
   
}

function calculateRow() {
    var cost = 0;
    var $row = $(this).closest("tr");
    var qty = parseFloat($row.find('.qty').val());

    // changed the following line to only look within the current row
    var rate = parseFloat($row.find('.rate').val());

    cost = qty * rate;

    if (isNaN(cost)) {
        $row.find('.cal').val("0");
    } else {
        $row.find('.cal').val(cost);
    }
    calculateSum();
}