JSFiddle - React, Tailwind, and code Playground

by Saeed Abbaspour

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;           
        }