JSFiddle - React, Tailwind, and code Playground

by jdarville

HTML

<table id="checkrequesttable"  class="table order-list2 table table-striped table-condensed table-bordered">
<thead>
    <tr>
        <th>Part #</th>
        <th>Part Desc.</th>
        <th width="20%">Part Price</th>
        <th width="20%">Part Qty</th>
        <th class="actions">Total</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="text" class="input-small" name="partnum_1" value="0" ></td>
        <td><input type="text" class="input-small" name="partdesc_1" value="0" ></td>
        <td><input type="text" class="input-small" name="var_1" value="0" ></td>
        <td><input type="text" class="input-small" name="var_1_1" value="0" ></td>
        <td>$<span class="amount"></span> </td>
    </tr>
    <tr>
         <td><input type="text" class="input-small" name="partnum_1" value="0" ></td>
        <td><input type="text" class="input-small" name="partdesc_1" value="0" ></td>
        <td><input type="text" class="input-small" name="var_2" value="0" ></td>
        <td><input type="text" class="input-small" name="var_2_2" value="0" ></td>
        <td>$<span class="amount"></span> </td>
    </tr>
   
    </tbody>
    
     <tfoot>
        <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" id="addrow2" value="Add" class="btn btn-primary" />
            </td>
        </tr>
     
    </tfoot>
    
    
    </table><input type="text" class="input-small" name="total" id="total" >
    <button>Go!</button>
    
   <tr>
        <td colspan="3"><strong>Total event cost (viability)</strong></td>
        <td><strong>$<div class="total_amount">total</div></strong></td>
    </tr>

CSS

.table {
  text-align: center;
}

JavaScript

function doCalc() {
    var total = 0;
    $('tr').each(function() {
        $(this).find('span.amount').html($('input:eq(0)', this).val() * $('input:eq(1)', this).val());
    });
    $('.amount').each(function() {
        total += parseInt($(this).text(),10);
    });
    $('div.total_amount').html(total);
   
  
}
$('button').click(doCalc);

$(".input-small").on("focus blur select change click dblclick mousedown mouseup keypress keydown keyup", function (event) {
       
        doCalc();                
    });
    
$("#addrow2").on("focus blur select change click dblclick mousedown mouseup keypress keydown keyup", function (event) {
       
        doCalc();                
    });
    
$("tr").on("focus blur select change click dblclick mousedown mouseup keypress keydown keyup", function (event) {
       
        doCalc();                
});
    
$(document).ready(function () {
    var counter = 0;

    $("#addrow2").on("click", function () {

        counter = $('#checkrequesttable tr').length - 2;

        var newRow = $("<tr>");
        var cols = "";

        cols += '<td>Item</td>';
        cols += '<td><input class="input-small" type="text" name="var_' + counter + '"/></td>';
        cols += '<td><input class="input-small" type="text" name="var_1_' + counter + '"/></td>';
				cols += '<td>$<span class="amount"></span></td>';
        
        newRow.append(cols);
        if (counter == 100) $('#addrow2').attr('disabled', true).prop('value', "You've reached the limit");
        $("table.order-list2").append(newRow);
        counter++;
    });
});