JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable" class="order-list">

                <input type="button" id="addrow" value="Add Row" />

    <thead>
        <tr>
            <td></td>
            <td>Name</td>
            <td>Price</td>
            <td>Status</td>
            <td>Hidden Valie</td>
        </tr>
    </thead>
    <tbody>
        
        <tr>
            <td>
              <select class="select-style" id="qc_code1" name="qc_code1">
                  <option>----Select----</option>
                  <optgroup label="QC Code">             
                     <option value="IHRM" >IHRM</option>
                     <option value="ICS" >ICS</option>
                  </optgroup>
               </select>
            </td>
            <td>
                <input type="text" name="name" />
            </td>
            <td>
                <input type="text" name="price1" />
            </td>
            <td>
              <input class="form-control text-center" type="text" id="cri_result1" name="cri_result1" placeholder=""  readonly>
            </td>
            <td>
              <input class="form-control text-center" type="text" id="hidden_val1" name="hidden_val1" readonly>
            </td>
            <td><a class="deleteRow"></a>

            </td>
        </tr>
    </tbody>
    <tfoot>
       <td colspan="">Grand Total: $<span id="grandtotal"></span>
    </tfoot>
</table>

JavaScript

$(document).ready(function () {
    var counter = 0;

    $("#addrow").on("click", function () {

        counter = $('#myTable tr').length - 2;

        var newRow = $("<tr>");
        var cols = "";
				
        cols += '<td><select class="select-style" id="qc_code' + counter + '" name="qc_code' + counter + '"><option>----Select----</option><optgroup label="QC Code"> <option value="IHRM" >IHRM</option><option value="ICS" >ICS</option></optgroup></select></td>';
        cols += '<td><input type="text" name="name' + counter + '"/></td>';
        cols += '<td><input type="text" name="price' + counter + '"/></td>';
        cols += '<td><input type="text" name="cri_result' + counter + '"/></td>';
        cols += '<td><input type="text" name="hidden_val' + counter + '"/></td>';

        cols += '<td><input type="button" class="ibtnDel"  value="Delete"></td>';
        newRow.append(cols);
        //if (counter == 4) $('#addrow').attr('disabled', true).prop('value', "You've reached the limit");
        $("table.order-list").append(newRow);
        counter++;
    });		
    
    $("#qc_code1").change(function() {
    $("#hidden_val1").val($("#qc_code1").val()).change();
		});
    
    $("table.order-list").on("change", 'input[name^="price"]', function (event) {
        calculateRow($(this).closest("tr"));
        calculateGrandTotal();                
    });
    


    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();
        calculateGrandTotal();
        
        counter -= 1
        $('#addrow').attr('disabled', false).prop('value', "Add Row");
    });
    
    


});



function calculateRow(row) {
    var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="price"]').each(function () {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").text(grandTotal.toFixed(2));
}