JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn" id="NewInvoiceTableAddRow">Add New Item</button>
<button class="btn btn-danger" id="NewInvoiceTableDeleteRow">Delete Item</button>
<div class="clr"><br />
</div>
<table id="NewInvoiceTable" class="table table-condensed">
      <tbody>
            <tr>
                  <td><input type="checkbox" name="chk[]" /></td>
                  <td><input type="text" name="ItemName[]" id="ItemName-0" placeholder="Item Name"></td>
                  <td><input type="text" name="ItemPrice[]" id="ItemPrice-0" placeholder="Item Price"></td>
                  <td><input type="text" name="NumberOfItems[]" id="NumberOfItems-0" placeholder="Number Of Items"></td>
                  <td><div class="input-prepend"> <span class="add-on">Total:</span>
                              <input name="TotalInline[]" id="TotalInline-0" type="text" readonly />
                        </div></td>
            </tr>
      </tbody>
</table>

JavaScript

function AddRow(tableID){
    
    var i = $('#' + tableID + ' tbody tr').length;
    var tableRow = '<tr>';
    tableRow += '<td><input type="checkbox" name="chk[]" /></td>';
    tableRow += '<td><input type="text" name="ItemName[]" id="ItemName-' + i + ' " placeholder="Item Name"></td>';
    tableRow += '<td><input type="text" name="ItemPrice[]" id="ItemPrice-' + i + '" placeholder="Item Price"></td>';
    tableRow += '<td><input type="text" name="NumberOfItems[]" id="NumberOfItems-' + i + '" placeholder="Number Of Items"></td>';
    tableRow += '<td><div class="input-prepend"> <span class="add-on">Total:</span>';
    tableRow += ' <input name="TotalInline[]" id="TotalInline-' + i + '" type="text" readonly="readonly" />';
    tableRow += ' </div></td>';
    tableRow += '</tr>';
    $('#' + tableID + ' tbody').append(tableRow);
}
    


// Delete Row
    $('#NewInvoiceTableDeleteRow').click( function(event){
        var tableID = "NewInvoiceTable";
        deleteRow(tableID);
        return false;
    });
    
    // Add Row
    $('#NewInvoiceTableAddRow').click( function(event){
        var tableID = "NewInvoiceTable";
        AddRow(tableID);
        return false;
    });
    
    // Calc Inline Total
    $('#NewInvoiceTable').on('keyup', 'input', function(){
        var RowIndex = $(this).prop('id').split('-')[1];
        
        // Problem here
        var PriceItem = $("#ItemPrice-" + RowIndex).val();
        var NumberOfItems = $("#NumberOfItems-" + RowIndex).val();
console.log(RowIndex , $("#ItemPrice-1").val(), NumberOfItems )
        var price = PriceItem * NumberOfItems;
        
        if(isNaN(price)){
           price = "0.00"
        } else {
            price.toFixed(2);    
        }
        $("#TotalInline-"+RowIndex).val(price);
        
    });