Sum function didn't work javascript

Question

I have problem to sum text-box , but the text box can appeared if only i press add more button . so i mix it with on click function and the result is a sum function only can sum the first text box .

Here's my javascript :

var i = $('table tr').length;
var count = $('table tr').length;
var row = i;
var a = 0;

for (a = 0; a <= i; a++) {
  $(".addmore_" + a).on('click', function (a) {
    return function() {
    var box = $("#box_"+ a);
    box.val( Number(box.val())+1 );

      var data = "<td><input class='form-control sedang' type='text' id='packinglist_" + a + "' name='packinglist"+ a +"[]'/></td>";
      $("#keatas_" + a).append(data);

    $("#packinglist_"+ a).each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });


    function calculateSum() {

        var sum = 0;
        //iterate through each textboxes and add the values
        $("#packinglist_"+ a).each(function() {

            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }

        });
        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("#netto_"+ a).val(sum.toFixed(2));



                        };

            }
    }(a));

}

Here my html which mixed with php :

for($i=1;$i<=$_POST['jumlahdata'];$i++)
            {
                    $nomor = $a[0];
                    $iden = $nomor + $i;
                        echo"   <tr>
                                <td><span id='snum'>$i.</span></td>
                                <input class='form-control' type='hidden' id='hiddenlot_$i' name='hiddenlot[]' />
                                <input class='form-control' type='hidden' id='hiddencustomer_$i' name='hiddencustomer[]' />
                                <input class='form-control' type='hidden' id='hiddenprice_$i' name='hiddenprice[]' />
                                <td><input class='form-control' type='text' id='jenisbenang_$i' name='jenisbenang[]' readonly/></td>
                                <td><input class='form-control' type='text' id='warna_$i' name='warna[]' readonly/></td>                                
                                <td><input class='form-control' type='text' id='lot_$i' name='lot[]' required/></td>
                                <td><input class='form-control sedang' type='text' id='netto_$i' name='netto[]' required/> </td>
                                <td><input class='form-control pendek' type='text' id='box_$i' name='box[]' /> </td>
                                <td><input class='form-control pendek' type='text' id='cones_$i' name='cones[]'/> </td>
                                <td><input class='form-control' type='text' id='keterangan_$i' name='keterangan[]'/>
                                <input class='form-control' type='hidden' id='keterangan_$i' name='identitas[]' value='$iden'/>
                                 </td>
                            </tr>
                             <tr>
                                <td><a><span class='glyphicon glyphicon-plus addmore_$i' id='$i'></span></a><br>
                                <a><span class='glyphicon glyphicon-minus delete_$i'></a> </td>
                            <td colspan='10'>
                                <table id='keatas_$i' class='keatas'>
                                <tr>

                                </tr>   
                                </table>
                            </tr>
                            </td>";

            }   

any response would be appreciated , thanks

Fiddle here

Answer 1

The issue is applying keyup event listener inside click callback. For every click on ".addMore_"+a element, you are appending a <td> with id "packinglist_"+a in the a^th row. After that you are attaching keyup listener on that element. you are selecting with id which returns only the first match not all. so its only attaching listener to first <td> in that row with the id. Correction is given in code.
Alternatively you can do this using class. But you need to be careful to not attach events multiple times to an element.This causes unexpected behaviour and sometimes browser crashes.

in calculateSum function also you are accessing element by id which returns only one element. This should be fixed by giving unique class for input boxes of each row.

 var i = $('table tr').length;
 var count = $('table tr').length;
 var row = i;
 var a = 0;

for (a = 0; a <= i; a++) {
  $(".addmore_" + a).on('click',function () {
  return function() {
  var box = $("#box_"+ a);
  box.val( Number(box.val())+1 );

  var rowIdentifier="packinglist_" + a;
  var data = $("<td><input class='form-control sedang "+rowIdentifier +"' type='text' id='packinglist_" + a + "' name='packinglist"+ a +"[]'/></td>");

  $("#keatas_" + a).append(data);

data.find('input').on('keyup',function(){
            calculateSum();
        });

function calculateSum() {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(".packinglist_"+ a).each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }

    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#netto_"+ a).val(sum.toFixed(2));
                    };
        }
}(a));
}

Let me know if this helps. Try to simplify the html structure. its difficult to understand.

https://jsfiddle.net/rishabdev919/mj3gsLxe/
See the working fiddle

Answer 2

Please don't define click event and function inside a loop, try to use global classes so you don't need to use loop, check my suggestion bellow.

NOTE : You should use $('body').on('keyup','.packinglist', function(){ since $('.packinglist').keyup( function(){ can't deal with fresh DOM added by the script.

Hope this helps.

---

$('body').on('click', ".add-btn", function () {
    var parent_tr= $(this).closest('tr');
    var index= parent_tr.data('index');

    var box = parent_tr.find('input[name="box[]"]');
    box.val( Number(box.val())+1 );

    var data = "<td><input class='packinglist form-control sedang' type='text' id='packinglist_" + index + "' name='packinglist"+ index +"[]'/></td>";
    
    $("#keatas_" + index).append(data);
});

$('body').on('keyup','.packinglist', function(){
		console.log($(this).val());
    
  	var parent_tr = $(this).closest('tr');
    var sum = 0;
    
    parent_tr.find('.packinglist').each(function() {
      if(!isNaN($(this).val()) && $(this).val().length!=0) {
        sum += parseFloat($(this).val());
      }
    });
    
    parent_tr.prev('tr').find('input[name="netto[]"]').val(sum.toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input class='form-control sedang' type='text' id='netto_1' name='netto[]' placeholder="netto" required/> </td>
  <tr data-index='1'>
    <td><a><input type='button' value='addmore' class='add-btn glyphicon glyphicon-plus addmore_1'><br> </td>
    <td colspan='10'>
      <table id='keatas_1' class='keatas'>
        <tr>

        </tr>	
      </table>
    </td>
  </tr>

  <tr>
    <td><input class='form-control sedang' type='text' id='netto_2' name='netto[]' placeholder="netto" required/> </td>
  <tr data-index='2'>
    <td><a><input type='button' value='addmore' class='add-btn glyphicon glyphicon-plus addmore_2'><br> </td>
    <td colspan='10'>
      <table id='keatas_2' class='keatas'>
        <tr>

        </tr>	
      </table>
      </td>	
  </tr>
</table>

Answer 3

Remove keyup event binding out side loop

 $("#packinglist_"+ a).each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });

Add a class .packageList and bind keyup with class.

$("tr").on("keyup", ".packageList", function(evt) {
       calculateSum();
});