html - Calculate quantity and update inside a table by JavaScript

Question

I want to do the following:

After an item with amount has been added, write a function to calculate the total quantity when the table have any change in items updated and return the new total quantity at the bottom of the table. Such that the total amount will appear in the tfoot.

How should I modify my script to make these possible? Thanks!

     <div id="Sushi" class="tabcontent">
        <form action="#" method="get">
            <table border="0" style="width:100%">
                <tr>
                    <td>
                        <img src="sushi-1.jpg" id="su1-img" title="Sushi Set A">
                        <input id="su1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="su1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>

                    <td>
                        <img src="sushi-2.jpg" id="su2-img" title="Sushi Set B">
                        <input id="su2-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="su2" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>

                    <td>
                        <img src="sushi-3.jpg" id="su3-img" title="Sushi Set C" width="125" height="135">
                        <input id="su3-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="su3" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>
                </tr>
                <tr>
                    <td rowspan="3">
                        <img src="sushi-4.jpg" id="su4-img" title="Sushi Set D">
                        <input id="su4-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="su4" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div id="Drinks" class="tabcontent">
        <form action="#" method="get">
            <table border="0" style="width:100%">
                <tr>
                    <td>
                        <img src="drink-1.jpg" id="dr1-img" title="Guava juice">
                        <input id="dr1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="dr1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>

                    <td>
                        <img src="drink-2.jpg" id="dr2-img" title="Lemonade">
                        <input id="dr2-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="dr2" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>

                    <td>
                        <img src="drink-3.jpg" id="dr3-img" title="Orange juice" width="125" height="135">
                        <input id="dr3-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="dr3" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div id="Dessert" class="tabcontent">
        <form action="#" method="get">
            <table border="0" style="width: 100%;">
                <tr>
                    <td>
                        <img src="dessert-1.jpg" id="de1-img" title="Raspberry cheese cake" width="140" height="125">
                        <input id="de1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
                        <input id="de1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
                    </td>
                </tr>
            </table>
        </form>
    </div>


    <div style="border:0px;" id="order">
        <center>
            <h2><b>Ordered Items</b></h2>
            14 Mar 2017 15:59
            <br><br>
            Table:4 - No. of Guests 3

            <table class="nth-table" id="orderlist" border="1">
                <thread>
                    <tr>
                        <th>Description</th>
                        <th>Qty</th>
                    </tr>
                </thread>
                <tbody>
                    <tr>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td align="left"><strong>Total</strong></td>
                        <td align="right" id="val"><strong></strong></td>
                    </tr>
                </tfoot>
            </table>
            <br>
            <div class="noPrint">
                <a href="Order.html">undo</a>
            </div>
        </center>
        <br>
    </div>

    <script>
        function registerHandlers() {
            var buttons = document.querySelectorAll('.button');
            [].slice.call(buttons).forEach(function (button) {
                button.addEventListener('click', onClick, false);
            });
        }

        function onClick(event) {
            event.preventDefault();
            var button = event.target;
            var id = button.id;
            var desc = document.getElementById(id + '-img').getAttribute('title');
            var qty = document.getElementById(id + '-qty').value;

            addToTable(desc, qty);
        }

        function addToTable(desc, qty) {
            var row = '<tr><td align="left">' + desc + '</td><td align="right">' + qty + '</td></tr>';
            var tbody = document.querySelector('#orderlist tbody');
            tbody.innerHTML = tbody.innerHTML + row;
        }

        registerHandlers();
    </script>

Answer 1

While adding the order items do not add them directly to the table. Create a data object (array of objects [{item: 'itemName', quantity: 1, price: quantity*actualprice}] ). If the same item got to add then update the item count in the object and pass the object to build the table and update the table.