JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<td><input type="text" name="lcost1" size="10" id="lcost1" value="0" /></td> <td><input type="text" name="epay1" size="10" id="epay1" value="0" /></td> <td><input type="text" name="dp1" size="10" id="dp1" value="0" /></td> <td><input disabled="disabled" size="10" type="text" name="mcost1" id="mcost1" /></td> <td><input disabled="disabled" size="10" type="text" name="devtax1" id="devtax1" /></td>
<div id="ans"></div>

JavaScript

$('input').keyup(function(){  
	$('#ans').html( calculateTotal() );
});

function calculateTotal() {
	
  var lcost1 = parseFloat($('#lcost1').val());
  var epay1 = parseFloat($('#epay1').val());
  var dp1 = parseFloat($('#dp1').val());
  var output = ((lcost1*24-(dp1/2))/24)+((epay1-(dp1/2))/24);

  return (isNaN( output )) ? 'Fill boxes with valid data' : output;
}