JSFiddle - React, Tailwind, and code Playground

by Patrick Robles

HTML

First:<input type="text" id="first"><br>
Second:<input type="text" id="second"><br>
Third:<input type="text" id="third"><br>
Total:<input type="text" id="totalCost" readonly>

JavaScript

$('#first,#second,#third').blur(function(){

    var firstCost = parseFloat($('#first').val());
    var secondCost = parseFloat($('#second').val());
    var thirdCost = parseFloat($('#third').val()); 
    if(isNaN(firstCost) == true){
        firstCost = 0;
    }
    if(isNaN(secondCost) == true){
        secondCost = 0;
    }
    if(isNaN(thirdCost) == true){
        thirdCost = 0;
    }
    var tCost = firstCost+secondCost+thirdCost;
    $('#totalCost').val(tCost.toFixed(2));
});