JSFiddle - React, Tailwind, and code Playground

by mishragaurav31

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<form  id="whereEntry" method='post' action=''>
<input type="text" class="income_count1" index="1" id="income1"> 
<input type="text" class="reduce_count1" index="1" id="income1" > 

<input type="text" class="reduce_count1" index="1" id="reduce1" > <br>

<input type="hidden" id="income_red1" >
<input type="hidden" id="income_sum1" > 
<br>
<input type="text" id="finale1" >

<br>
<hr>
<input type="text" class="income_count2" index="2" id="income2"> 
<input type="text" class="reduce_count2" index="2" id="income2" > 

<input type="text" class="reduce_count2" index="2" id="reduce2" > <br>

<input type="hidden" id="income_red2" >
<input type="hidden" id="income_sum2" > 
<br>
<input type="text" id="finale2" >

<br>
<hr>
</form>

JavaScript

$( document ).ready(function() {                

for(var abc=1;abc<3;abc++)
{
    debugger

    $('#whereEntry').delegate(".income_count"+abc, 'change', function ()
       {
            debugger;
           var incomeValue = $(this).val();
           var sum = 0;
           $('#whereEntry').find('.reduce_count'+$(this).attr('index')).each(function (){
               sum += Number($(this).val());
           });
         $('#finale'+$(this).attr('index')).val(incomeValue - sum);
    });


    $('#whereEntry').delegate(".reduce_count"+abc, 'change', function ()
{
    debugger;
    
    var incomeValue = $('#whereEntry').find('.income_count'+$(this).attr('index')).val();
    var sum = 0;
           $('#whereEntry').find('.reduce_count'+$(this).attr('index')).each(function (){
               sum += Number($(this).val());
           });
    $('#finale'+$(this).attr('index')).val(incomeValue - sum);                           
                                         
});

}    
    
    });