JSFiddle - React, Tailwind, and code Playground

by Paul

HTML

<form id='form_10942'>
    <input id="element_75" value="0">
    <br>
    <input id="element_76" value="0">
    <br>
    <input id="element_77" value="0">
    <br>
    <input id="element_78" value="0">
    <br>
    <input id="element_79" value="0">
    <br>
    <input id="element_80" value="0">
    <br>
    <input type="text" id="element_81" disabled>
    <br>
</form>

CSS

input:disabled { background: #EEE; }
body { padding:10px;margin:25px 0 0 25px;}
input { padding:5px;margin: 5px 0; }

JavaScript

$(document).ready(function () {
	
    if ($('#form_10942').length) {
		alert("Form exists");
        $('#element_81').css("cursor: help !important;");
		$("#element_81").prop('disabled', true);
		$(document).change(function() {
			one     = $("#element_75").val();
			two     = $("#element_76").val();
			three   = $("#element_77").val();
			four    = $("#element_78").val();
			five    = $("#element_79").val();
			six     = $("#element_80").val();

			total   = parseFloat(one) + parseFloat(two) + parseFloat(three) + parseFloat(four) + parseFloat(five) + parseFloat(six);

			$("#element_81").val(parseFloat(total).toFixed(2));
		}); 
	}
});