JSFiddle - React, Tailwind, and code Playground

by hescano

HTML

<table>
    <tr>
        <td>Family Home:</td>
        <td>
            <input type="text" id="family_home" />
        </td>
    </tr>
    <tr>
        <td>Home Contents:</td>
        <td>
            <input type="text" id="home_contents" />
        </td>
    </tr>
    <tr>
        <td>Motor Vehicle:</td>
        <td>
            <input type="text" id="motor_vehicle" />
        </td>
    </tr>
    <tr>
        <td>Total:</td>
        <td id="Total"></td>
    </tr>
</table>

JavaScript

$(document).on('change', '#family_home,#home_contents,#motor_vehicle,#Total', function() {
	updateTotal();
	});       
var updateTotal =function() {
var a = parseInt($('#family_home').val());
	$('#family_home').val(a.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
var b = parseInt($('#home_contents').val());
    if (!isNaN(b))
	$('#home_contents').val(b.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
var c = parseInt($('#motor_vehicle').val());
    if (!isNaN(c))
	$('#motor_vehicle').val(c.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
var total = parseInt(a)+parseInt(b)+parseInt(c);   
    $("#Total").html(total);         
};