JSFiddle - React, Tailwind, and code Playground

by Bhupesh Kushwaha

HTML

<form method="post">
    <input type="text" id="the_input_id">
    <input type="text" id="the_input_id1">
    <input type="text" id="total">
</form>

JavaScript

$(function() {

    $('#the_input_id').keyup(function() {  
        updateTotal();
    });
    
    $('#the_input_id1').keyup(function() {  
        updateTotal();
    });
    
    var updateTotal = function () {
      var input1 = parseInt($('#the_input_id').val());
      var input2 = parseInt($('#the_input_id1').val());
      if (isNaN(input1) || isNaN(input2)) {
          if(!input2){
              $('#total').val($('#the_input_id').val());
          }
          
          if(!input1){
                $('#total').val($('#the_input_id1').val());
          }
          
      } else {          
            $('#total').val(input1 + input2);
      }
    };

    var output_total = $('#total');

    var total = input1 + input2;

   output_total.val(total);

 });