JSFiddle - React, Tailwind, and code Playground

HTML

<form class="form-inline" role="form">
                  <!--Adjust Vehicle Cost -->
                  <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
                    <label for="vehiclePrice">Vehicle Price</label>
                    <input type="number" class="form-control" id="vehiclePrice" placeholder="Vehicle Price" onkeypress="return isNumberKey(event)" value="0">
                  </div>
                  <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
                    <label for="estimatedTaxesAndFees">Estimated Taxes and Fees</label>
                    <input type="number" class="form-control" id="estimatedTaxesAndFees" placeholder="Estimated Taxes and Fees" onkeypress="return isNumberKey(event)" value="0">
                  </div>
                </form>
              
                  <h6>DOWN PAYMENT & TRADE-IN</h6>
                  <hr>
                  <form class="form-inline" role="form">
                    <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
                      <label for="downPayment">Down Payment</label>
                      <input type="number" class="form-control" id="downPayment" placeholder="Down Payment" onkeypress="return isNumberKey(event)" value="0">
                    </div>
                    <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-euro"</span>
                      <label for="manufacturerRebate">Manufacturer Rebate</label>
                      <input type="number" class="form-control" id="manufacturerRebate" placeholder="Manufacturer Rebate" onkeypress="return isNumberKey(event)" value="0">
                    </div>
                    <div class="form-group col-sm-6"> <span class="glyphicon glyphicon-usd"</span>
                      <label for="tradeInValue">Trade-In Value</label>
                      <input type="number" class="form-control" id="tradeInValue"...

JavaScript

$("body").on("blur", "#serviceContract,#gapInsurance,#extendedWarranty,#amtOwedOnTrade,#tradeInValue,#manufacturerRebate,#downPayment,#estimatedTaxesAndFees,#vehiclePrice",function() {
		updateTotal();
	});
    var updateTotal = function() {
        var input1 = parseInt($('#vehiclePrice').val());
        var input2 = parseInt($('#estimatedTaxesAndFees').val());
        var input3 = parseInt($('#downPayment').val());
		var input4 = parseInt($('#manufacturerRebate').val());
        var input5 = parseInt($('#tradeInValue').val());
        var input6 = parseInt($('#amtOwedOnTrade').val());
		var input7 = parseInt($('#extendedWarranty').val());
        var input8 = parseInt($('#gapInsurance').val());
        var input9 = parseInt($('#serviceContract').val());
       if (input1 ==undefined || input2 == undefined || input3 == undefined || input4 == undefined || input5 == undefined || input6 == undefined || input7 == undefined || input8 == undefined ||input9 == undefined ) {
            $('#total').text(total);
        } else {
            var max = 40000;
            var total = input1 + input2 - input3 - input4 - input5 + input6 + input7 + input8 + input9;

            if (total > max) {
                $('#total').text('The maximum is ' + max);
                $('#total1').val(40000);
            } else {
                $('#total').text(total);
                $('#total1').val(total);
            }
		}
    };