JSFiddle - React, Tailwind, and code Playground

by Ermin Bicakcic

HTML

<input id='first' type="text" class="form-control formBlock" name="bus_ticket" placeholder="Value a" required/>
<br />

<input id='second' type="text" class="form-control formBlock" name="plane_ticket" placeholder="Value b" required/>
<br />

<input id='third' type="text" class="form-control formBlock" name="hotel_expenses" placeholder="Value c" required/>
<br />

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

<br />
<br /> Final Result: <span id="results"></span>

JavaScript

$('input').keyup(function() { // run anytime the value changes
  var firstValue = Number($('#first').val()); // get value of field
  var secondValue = Number($('#second').val()); // convert it to a float
  var thirdValue = Number($('#third').val());
  var results = Number($('#results').val());

  $('#total_expenses1').html((firstValue + secondValue + thirdValue)); // add them and output it
  // add them and output it
});

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