JSFiddle - React, Tailwind, and code Playground

by AlexJsh02

HTML

<form id="form1" name="form1">
<p>
<table id="table1" class="table1">
<tr>
    <td>From Account</td>
    <td>From Amount</td>
    <td>To Account</td>
    <td>To Amount</td>    
</tr>
<tr>
    <td><input id="text1" name="text1" type="text" /></td>
    <td><input id="text2" name="text2" type="text" class="fromAmount" onchange="getFromSum();" value="0" /></td>
    <td><input id="text3" name="text3" type="text" /></td>
    <td><input id="text4" name="text4" type="text" class="toAmount" value="0" /></td>    
</tr>
<tr>
    <td><input type="checkbox" style="margin: 0 4px 0 0;"/><input id="text1" name="text1" type="text" style="width: 85%"/></td>
    <td><input id="text2" name="text2" type="text" class="fromAmount" onchange="getFromSum();" value="0" /></td>
    <td><input id="text3" name="text3" type="text" /></td>
    <td><input id="text4" name="text4" type="text" class="toAmount" value="0" /></td>    
</tr>
</table></p>
    From Amount: <label id="label1" name="label1"></label>
<p>
</p>
</form>

CSS

TABLE {
    border: thin solid black;
    font-family: "Verdana", san-serif;
    font-size: 12pt;
}
TD {
    border: thin solid black;
    line-height: 1em;
    padding: 2px;
}
TD INPUT[type=text] {
    display:inline-block;
    vertical-align:middle;
    text-align:right;
	font-family: Arial, Sans-Serif;
	/*display: block;*/
	border: solid 1px #85b1de;
}
TD INPUT[type=text]:focus {
	background:#F9F9F9;
	border: thin solid white;
}
TD INPUT[type=checkbox] {
    display:inline-block;
    vertical-align:middle;
}
}
.textLeft {
    text-align: left;
}
.textLeft {
    text-align: left;
}
.toAmount{
    
}
.fromAmount{
    
}

JavaScript

$(document).ready(function () {
    var $tr;
    $("#table1").delegate("input:checkbox", "click", function() {
        var $tr = $(this).closest('tr');
        alert($tr);
    });

    $("#table1").delegate("input.fromAmount:text", "keyup", function() {
        //alert('getFromSum');
        var num = getFromSum();
        if (isNaN(num)) {
            num = 0;
            //alert(num);
        }
        $('#label1').text(formatNumber(num));
    });
    
    $('#label1').text(formatNumber(getFromSum()));
});

function getFromSum() {
    //alert('getFromSum');
    var txtBoxFrom = $("table#table1 input:text[class='fromAmount']");
    var num = 0;
    $.each(txtBoxFrom,  function(index, el) {
        num += parseInt(el.value.replace(/,/g , ""));
    });
    return num;
}

function formatNumber(x) {
    x = x.toString();
    var pattern = /(-?\d+)(\d{3})/;
    while (pattern.test(x))
        x = x.replace(pattern, "$1,$2");
    return '$ '+x;
}