JSFiddle - React, Tailwind, and code Playground

HTML

<table id="mytable" width="394">
	<colgroup>
		<col style="width: 50px;">
			<col>
				<col style="width: 60px;">
					<col style="width: 110px;">
	</colgroup>
	<tbody>
		<tr>
			<th  width="130" height="43"></th>
			<th width="52">Weight Select</th>
			<th width="181">New P</th>
		</tr>
		<tr>
			<td align="center" width="130">&nbsp;</td>
			<td align="center">
				<input type="text" size="2" value="1" id="qty_item_1" name="sum" >
			</td>
			<td align="center" id="total_item_1"></td>
		</tr>
		<tr>
			 <td align="center" width="130"></td>
			<td align="center"  >
				<input type="text" size="2" value="1" id="qty_item_2" name="sum" >
			</td>
			<td align="center" id="total_item_2"></td>
		</tr>
		<tr class="tr">
			<td align="left" colspan="1"><strong>Grand Total:</strong></td>
			<td width="11" align="left" id="totalSum"></td>
		</tr>
	</tbody>
</table>
<input type="button" id="mybutt" value="Add Them Up" />

CSS

table{border-collapse:collapse; border:1px solid lightgrey;}
td, tr{border:1px solid lightgrey;}

JavaScript

var bIsFirebugReady = (!!window.console && !!window.console.log);

    $('#mybutt').click(function() {
        var ttl = 0;
        var str;
        $('[id^=qty_item_]').each(function() {
            //alert( $(this).attr('id') );
            str = $(this).val();
            ttl += Number(str);
        });
        $('#totalSum').text(ttl).trigger('change');
    });

$('#totalSum').change(function() {
    var sum = $(this).text();
    alert('Value: ' + sum);
    if (Number(sum) > 99) {
         alert('Value > 100. AJAX will begin, but cannot finish because jsFiddle cannot do ajax. Just look at syntax.').
        $.ajax({
            type: "POST",
			url: "some_php_file.php",
			data: 'myTotalSum='+sum,
			success:function(data){
                alert(data);
            }
        });
    }
});

	// update the plug-in version
	$("#idPluginVersion").text($.Calculation.version);

	// bind the recalc function to the quantity fields
	$("input[id^=qty_item_]").bind("keyup", recalc);

	// run the calculation function now
	recalc();

	// automatically update the "#totalSum" field every time
	// the values are changes via the keyup event
	$("input[name^=sum]").sum("keyup", "#totalSum");

	// automatically update the "#totalAvg" field every time
	// the values are changes via the keyup event
	$("input[name^=avg]").avg({
		bind:"keyup"
		, selector: "#totalAvg"
			// if an invalid character is found, change the background color
		, onParseError: function(){
			this.css("backgroundColor", "#cc0000")
		}
		// if the error has been cleared, reset the bgcolor
		, onParseClear: function (){
			this.css("backgroundColor", "");
		}
	});
	
	// automatically update the "#minNumber" field every time
	// the values are changes via the keyup event
	$("input[name^=min]").min("keyup", "#numberMin");

	// automatically update the "#minNumber" field every time
	// the values are changes via the keyup event
	$("input[name^=max]").max("keyup", {
		selector: "#numberMax"
		, oncalc: function...