How to sum Jquery Outputs

Question

I created couple of rows and multiplied some data to get totals:

But I am not sure how to sum all the totals and print it in "Cash in Hand" row.

Following are my codes:

<script  type="text/javascript">
$(document).ready(function() {
    $('.row1').keyup(function(ev){
        
        var row1c = $(this).val() * 1000;
        $('.row1c').html((row1c).toFixed(2));

    });
});
</script>

<script  type="text/javascript">
$(document).ready(function() {
    $('.row2').keyup(function(ev){
        
        var row2c = $(this).val() * 500;
        $('.row2c').html((row2c).toFixed(2));

    });
});
</script>


<script  type="text/javascript">
$(document).ready(function() {
    $('.row3').keyup(function(ev){
        
        var row3c = $(this).val() * 100;
        $('.row3c').html((row3c).toFixed(2));

    });
});
</script>


<script  type="text/javascript">
$(document).ready(function() {
    $('.row4').keyup(function(ev){
        
        var row4c = $(this).val() * 50;
        $('.row4c').html((row4c).toFixed(2));

    });
});
</script>

<script  type="text/javascript">
$(document).ready(function() {
    $('.row5').keyup(function(ev){
        
        var row5c = (row1c+row2c+row3c+row4c);
        $('.row5c').html((row5c).toFixed(2));

    });
});
</script>

<table border="2" cellpadding="5" cellspacing="2" align="center">
        
        <h3 align="center">Cash Position as on...... </h3>
            <tr>
                    <th>Note</th>
                    <th>Quantity</th>
                    <th>Total</th>
            </tr>


            <tr>
                <td>1000 Tk Note</td>
                <td><input type="text" name="pages" class="row1" /></td>
                <td><span class="row1c">0.00</span></td>
            </tr>  

            <tr>
                <td>500 Tk Note</td>
                <td><input type="text" name="pages" class="row2" /></td>
                <td><span class="row2c">0.00</span></td>
            </tr>   

             <tr>
                <td>100 Tk Note</td>
                <td><input type="text" name="pages" class="row3" /></td>
                <td><span class="row3c">0.00</span></td>
            </tr>  

             <tr>
                <td>50 Tk Note</td>
                <td><input type="text" name="pages" class="row4" /></td>
                <td><span class="row4c">0.00</span></td>
            </tr>  





            <tr>
                <td colspan ="2">Cash In Hand (Sum of All Totals)</td>
            
               <td><span class="row5c">0.00</span></td>
            </tr>

    </table>

All codes together here:

https://jsfiddle.net/rashelmiah/fb9opo36/1/

Could you please me find a way to sum all the totals? Thanks in advance.

Answer 1

You need add the following code.

$('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().find('span').text());
    })
    $('.row5c').text(total);
})

Note: Your code had a lot of <script> tags which was unnecessary. And a lot of ready() function, which was unnecessary too. You can wrap the whole code inside one <script> tag and one ready() function.

Demo:

$(document).ready(function() {
    $('.row1').keyup(function(ev){
        
        var row1c = $(this).val() * 1000;
        $('.row1c').html((row1c).toFixed(2));

    });
    $('.row2').keyup(function(ev){
        
        var row2c = $(this).val() * 500;
        $('.row2c').html((row2c).toFixed(2));

    });
  
    $('.row3').keyup(function(ev){
        
        var row3c = $(this).val() * 100;
        $('.row3c').html((row3c).toFixed(2));

    });
    $('.row4').keyup(function(ev){
        
        var row4c = $(this).val() * 50;
        $('.row4c').html((row4c).toFixed(2));

    });

    $('.row5').keyup(function(ev){
        
        var row5c = (row1c+row2c+row3c+row4c);
        $('.row5c').html((row5c).toFixed(2));

    });
  
  $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().find('span').text());
    })
    $('.row5c').text(total.toFixed(2));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="2" cellpadding="5" cellspacing="2" align="center">

  <h3 align="center">Cash Position as on...... </h3>
  <tr>
    <th>Note</th>
    <th>Quantity</th>
    <th>Total</th>
  </tr>


  <tr>
    <td>1000 Tk Note</td>
    <td>
      <input type="text" name="pages" class="row1" />
    </td>
    <td><span class="row1c">0.00</span>
    </td>
  </tr>

  <tr>
    <td>500 Tk Note</td>
    <td>
      <input type="text" name="pages" class="row2" />
    </td>
    <td><span class="row2c">0.00</span>
    </td>
  </tr>

  <tr>
    <td>100 Tk Note</td>
    <td>
      <input type="text" name="pages" class="row3" />
    </td>
    <td><span class="row3c">0.00</span>
    </td>
  </tr>

  <tr>
    <td>50 Tk Note</td>
    <td>
      <input type="text" name="pages" class="row4" />
    </td>
    <td><span class="row4c">0.00</span>
    </td>
  </tr>





  <tr>
    <td colspan="2">Cash In Hand (Sum of All Totals)</td>

    <td><span class="row5c">0.00</span>
    </td>
  </tr>

</table>