JSFiddle - React, Tailwind, and code Playground

HTML

<title>Finance</title>
<body>

<h1>Financial Keeps</h1>

<p><b>Starting Amount: &#36; <input type="number" id="startAmt" name="startAmt" onkeyup="calc(this)"/></b></p>
 
<p>To subtract an amount place a minus (-) sign infront of the dollar amount.</p>
 
<button onclick="insertRow()" id="addRow" >Add Row</button>

<!--<button onclick="removeRow()" id="delRow" >Delete Row</button>-->

<table id="myTable">
	<tr>
		<th>Bill Info</th>
		<th>Bill Amount</th>
		<th>Date</th>
		<th>Comment</th>
	</tr>
	<tr>
		<tr>
        <td><input type="text"    id="billInfo"></td>
		<td><input type="number"  id="billAmt" name="number" onkeyup="calc(this)"></td>
		<td><input type="date"    id="date"></td>
		<td><input type="text"    id="commentBox"></td>
		<!--<td><input style="cursor: pointer;" type="button" id="delBtn" value="Delete" onclick="removeRow(this)"></td>-->
	</tr>
</table>
   
  <input type="hidden" id="total" name="total" value="0" />
	<p><b>Ending Amount: &#36; <span id="totalAmt">0</span></b></p>

CSS

table {
	padding-top: 15px;
}

td {
	white-space: nowrap;
}

button {
	cursor: pointer;
}

JavaScript

function insertRow() {
	var x = document.getElementById("myTable");
	var row = x.insertRow(x.rows.length);
	
		var cell = row.insertCell(0);
		var a = document.createElement("input");
			a.setAttribute("type","text");
			cell.appendChild(a);
			
	    var cell1 = row.insertCell(1);
		var b = document.createElement("input");
			b.setAttribute("type","number");
			b.setAttribute("id","billAmt");
			b.setAttribute("name","number");
			b.setAttribute("onkeyup","calc(this)");
			cell1.appendChild(b);
			
		var cell2 = row.insertCell(2);
		var c = document.createElement("input");
			c.setAttribute("type","date");
			cell2.appendChild(c);
			
		var cell3 = row.insertCell(3);
		var d = document.createElement("input");
			d.setAttribute("type","text");
			cell3.appendChild(d);
			
		var cell4 = row.insertCell(4);
		var	e = document.createElement("button");
			e.innerText = "Delete";
			e.setAttribute("id","delBtn");
			e.setAttribute("onclick","removeRow(this)");
			cell4.appendChild(e); 
}

function removeRow(elem) {
  var table = elem.parentNode.parentNode.parentNode;
  var rowCount = table.rows.length;
  var row = elem.parentNode.parentNode; 
  row.parentNode.removeChild(row); 
}

        var x = 0;
        var y = 0;
        var z = 0;
        function calc(obj) {
            var e = obj.id.toString();
            if (e == 'startAmt') {
                x = Number(obj.value);
                y = Number(document.getElementById('billAmt').value);
            } else {
                x = Number(document.getElementById('startAmt').value);
                y = Number(obj.value);
            }
            z = x + y;
            document.getElementById('total').value = z;
            document.getElementById('totalAmt').innerHTML = z;
           
        }