Calculate multiple rows of jquery dynamic form

Question

I have tried to find out the summation of multiple rows of jquery forms. But could not.

Input :

<input type="text" name="item_quantity[]" class="form-control item_quantity" " />

Jquery

$('input').keyup(function()
{ 
   var num  = Number($('#item_quantity').val());  
   var sum = 0;
   for(i=0; i<num.size(); i++)
   {
       sum += num;
       document.getElementById('total').value = sum;
   }
});

Output :

Total: <span id="total"></span>

Answer 1

You are selecting by id: $('#item_quantity'), whilst using the name attribute. Instead you should use the $('[name=item_quantity[]]') selector.

Something like this should work:

$('input').keyup(function()
{ 
   const $elements = $('[name=item_quantity[]]');
   let sum = 0;
   for (let i=0; i<$elements.size(); i++)
   {
       sum += Number($elements[i].val());
   }
   $('#total').html(sum);
});

You can checkout this answer for more information about this selector.

Answer 2

$('input').keyup(function()
{ 
   var names=document.getElementsByName('item_quantity[]');
   var sum =0;
   for(key=0; key < names.length; key++)  
   {
      sum += Number(names[key].value);
      document.getElementById('total').value = sum;
   }
});