JSFiddle - React, Tailwind, and code Playground

HTML

Item:
<input type="text" name="item" id="item" />
<br />Quantity:
<input type="text" name="quantity" id="quantity" />
<br />Price: AUD
<input type="text" name="price" id="price" />
<br /><br />
<input type="button" value="Add Product +" onClick="addRow()" id="add">
<br /><br />
<table id="table" border="1">
<thead id="table-head">
<tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>

JavaScript

function addRow() {
"use strict";

var tableBody = document.getElementById("table-body");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");    
var row = document.createElement("row");

td1.innerHTML = document.getElementById("item").value;
td2.innerHTML  = document.getElementById("quantity").value;
td3.innerHTML  = document.getElementById("price").value;

row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);

tableBody.appendChild(row);
}