JSFiddle - React, Tailwind, and code Playground

by mudBorn

HTML

<body>
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
    <tr>
        <td width="40px">1</td>
        <td>Butter</td>
        <td><input class="amount" name="2323bedkj"/></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Cheese</td>
        <td><input class="amount" name="2323bedbc" /></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Eggs</td>
        <td><input class="amount" name="2323bedxc" type="text" /></td>
    </tr>
    <tr>
        <td>4</td>
        <td>Milk</td>
        <td><input class="amount" name="2323bedsa" type="text" /></td>
    </tr>
    <tr>
        <td>5</td>
        <td>Bread</td>
        <td><input class="amount" name="2323bedqw" type="text" /></td>
    </tr>
    <tr>
        <td></td>
        <td>Total</td>
        <td><input class="amount" type="text" name='totalBEDamount'/></td>
    </tr>
  
</table>
     </body>

JavaScript

$(document).ready(function(){
 
        //iterate through each textboxes and add keyup
        //handler to trigger sum event
        $("input[name*='bed'][class='amount']").each(function() {

            $(this).keyup(function(){
			 calculateSum();
            });
        });
 
    });
 
    function calculateSum() {
 
        var sum = 0;
        //iterate through each textboxes and add the values
        $("input[name*='bed'][class='amount']").each(function() {
 
            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
 
        });
        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("input[name='totalBEDamount']").val(sum.toFixed(2));
    }