JSFiddle - React, Tailwind, and code Playground

HTML

<input id="first"></input><br />

<input id="second"></input><br />

<input id="third"></input><br />



Total:<span id="added"></span><br />

CSS

input{
                margin: 10px; }

JavaScript

$('input').keyup(function(){ // run anytime the value changes
    
    
    var firstValue = parseFloat($('#first').val()) || 0; // get value of field
    var secondValue = parseFloat($('#second').val()) || 0; // convert it to a float
    var thirdValue = parseFloat($('#third').val()) || 0;
    
    $('#added').html(firstValue + secondValue + thirdValue); // add them and output it
});