JSFiddle - React, Tailwind, and code Playground
HTML
<form name="order" id="order">
<table>
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input id="product" name="product" title="Please enter only alphabetic characters" type="text" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity" title="Enter item quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price" title="Please enter only numeric characters" size="28" />
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<button type="button" onClick="updateForm();"/>Add To Table</button>
</form>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Products</th>
<th scope="col" width="120">Quantity</th>
<th scope="col" width="120">Price</th>
</tr>
</thead>
</table>
<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="qtyTotals"></div></td>
<td scope="col" width="120"><div id="priceTotals"></div></td>
</tr>
</table>
JavaScript
var qtyTotal = 0;
var priceTotal = 0;
function updateForm() {
var product = document.getElementById("product").value;
var qty = document.getElementById("quantity").value;
qtyTotal = qtyTotal + parseInt(qty);
document.getElementById("qtyTotals").innerHTML=qtyTotal;
var price = document.getElementById("price").value;
priceTotal = priceTotal + parseInt(price);
document.getElementById("priceTotals").innerHTML=priceTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=product;
cell2.innerHTML=qty;
cell3.innerHTML=price;
}