JSFiddle - React, Tailwind, and code Playground

by Carl Angelo Nievarez

HTML

<table width="1177" border="1" cellspacing="5" id="add" class="add">
    <tr>
        <td width="71" height="42">
            <button class="add">Add Rows</button>
        </td>
        <td width="144">
            <div align="center"><strong>Product Name</strong>

            </div>
        </td>
        <td width="146">
            <div align="center"><strong>Brand Name</strong>

            </div>
        </td>
        <td width="146">
            <div align="center"><strong>Model No</strong>

            </div>
        </td>
        <td width="146">
            <div align="center"><strong>Dealer Price</strong> (DP)</div>
        </td>
        <td width="146">
            <div align="center"><strong>Quantity (Q)</strong>

            </div>
        </td>
        <td width="146">
            <div align="center"> <strong>Total Price</strong> (TP)</div>
            <div align="center">(TP = DP x Q)</div>
        </td>
        <td width="153">
            <div align="center"><strong>Quality</strong>

            </div>
        </td>
        <td>
            <div align="center"><strong>Insert Image</strong>

            </div>
        </td>
    </tr>
    <tbody>
        <tr class="prototype">
            <td height="26">
                <button class="remove">Remove</button>
            </td>
            <td>
                <input type="text" name="product[]" id="product" />
            </td>
            <td>
                <input type="text" name="brand[]" id="brand" />
            </td>
            <td>
                <input type="text" name="model[]" id="model" />
            </td>
            <td>
                <input type="text" name="dprice[]" class="price" />
            </td>
            <td>
                <input type="text" name="quantity[]" class="quantity" />
            </td>
            <td>
                <input name="txt[]" type="text" class="txt" />
            </td>
            <td>
                <input type="text" name="quality[]"...

JavaScript

$(document).ready(function () {
    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".txt").each(function () {

        $("#btn").click(function () {
            calculateSum();
            $("#sum").show();
        });
    });

});

function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".txt").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
    $("#sum").val(sum.toFixed(2));
}