JSFiddle - React, Tailwind, and code Playground

by Shan95r

HTML

<html>
	<title>Product Add</title>
<head>
</head>
<body>
		<table id="itemsToOrder">
    <thead>
        <tr>
        <td>Remove</td>
        <td>Item Ref</td>
        <td>Description</td>
        <td>Quantity</td>
        <td>Unit Cost</td>
        <td>Sub-Total</td>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td><input type="checkbox" class="removeRow" name="removeRow"/></td>
        <td><input type="text" class="itemRef" value="Product One" name="itemRef" /></td>
        <td><input type="text" class="description" value="" name="description"/></td>
        <td><input type="text" class="quantity" value="0" name="quantity"/></td>
        <td><input type="text" class="unitCost" value="0" name="unitCost"/></td>
        <td><input type="text" class="total" value="0" name="total"/></td>
        </tr>
    </tbody>
    </table>
	<td><input type="text" class="subTotal" value="" name="subTotal"/></td> <br> <br>
	<input type="button" value="Add Item" onclick="addRow('itemsToOrder')" />
	<input type="button" value="Delete Selected Item" onclick="deleteRow('itemsToOrder')" />
</body>
</html>

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<script type="text/javascript">

/* table add/remove row*/
function addRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);
	var colCount = table.rows[0].cells.length;
	for(var i=0; i<colCount; i++) {
		var newcell	= row.insertCell(i);
		newcell.innerHTML = table.rows[1].cells[i].innerHTML;
		//alert(newcell.childNodes);
		switch(newcell.childNodes[0].type) {
			case "text":
					newcell.childNodes[0].value = "";
					break;
			case "checkbox":
					newcell.childNodes[0].checked = false;
					break;
			case "number":
					newcell.childNodes[0].value= "";
					break;
		}
	}
}

function deleteRow(tableID) {
	try {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;

	for(var i=0; i<rowCount; i++) {
		var row = table.rows[i];
		var chkbox = row.cells[0].childNodes[0];
		if(null != chkbox && true == chkbox.checked) {
			if(rowCount <= 2) {
				alert("Cannot delete all rows.");
				break;
			}
			table.deleteRow(i);
			rowCount--;
			i--;
		}
	}
	}catch(e) {
		alert(e);
	}
}

/*calculations*/

$(function () {
		$('.quantity, .unitCost, .total, .subTotal');
		var $tblrows = $("#itemsToOrder tbody tr");

		$tblrows.each(function (index) {
		var $tblrow = $(this);

		$tblrow.find('.quantity, .unitCost').on('keydown', function () {

		var quantity = $tblrow.find("[name=quantity]").val();
		var unitCost = $tblrow.find("[name=unitCost]").val();
		var totalal = parseInt(quantity, 10) * parseFloat(unitCost);

				if (!isNaN(totalal)) {

				$tblrow.find('.total').val(totalal.toFixed(2));
				var grandTotal = 0;

				    $(".total").each(function () {
						var stval = parseFloat($(this).val());
						grandTotal += isNaN(stval) ? 0 :...