JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<ul class="nav tabs " id="calculate">
    <li class="active">
        <input type="text" class="col-sm-3 pull-right" id="right-input">
    </li>
    <li><a href="#tab2" data-toggle="tab">    <input type="text" class="col-sm-3 pull-right" id="right-input"></a>
    </li>
    <li><a href="#tab3" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a>
    </li>
    <li><a href="#tab4" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a>
    </li>
    <li><a href="#tab5" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a>
    </li>
    <li><a href="#tab6" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a>
    </li>
    <li><a href="#tab7" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a>
    </li>
    <li><a href="#tab8" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a>
    </li>
    <li><a href="#tab9" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a>
    </li>
    <li><a href="#tab10" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a>
    </li>
</ul>
        
        Total:  <span id="total"></span>

JavaScript

$("input").keyup(function () {
     var $inputs = jQuery('#calculate :input');
     var values = {};
     var total = 0;
     $inputs.each(function () {

         //console.log(values[this.name] = jQuery(this).val());
         if ($(this).val() !== "") {
             total = parseFloat(total) + parseFloat($(this).val());
         }
         

     });
     console.log(total);
     $('#total').text(total);
 });