Как суммировать динамически Добавить поля ввода?

Question

У меня проблема. На данный момент я могу подсчитать сумму статических html-полей. Я хочу подсчитать сумму каждого нового динамического файла. Фотография показывает, что первая строка статична и правильно учитывает сумму. Это конкретный пример развертывания другие поля добавляются динамически, а первое поле является статическим. http://postimg.org/image/ivjbblo1p/ Мой вопрос в том, как написать код, который динамические поля автоматически вычисляют сумму?

$(document).ready(function(){ 
    var counter = 0; 
    $('.fee').keyup(function(){ 
     //iterate through each textboxes and add keyup 
     //handler to trigger sum event 
     var tax = (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val())) * (0.20)); 
     var neto = (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val()))); 
     var total = tax + (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val()))); 
     // var total = (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val()))); 
     counter += 1;  

     $('.fee').each(function(){ 
      var item = parseFloat($(this).val()); 
      if (isNaN(item)) { item = 0; } 
      total = total;   
      tax = tax; 
      neto = neto; 
     }); 

     $('.tax_1').val(tax.toFixed(2)); 
     $('.neto_1').val(neto.toFixed(2)); 
     $('.rez').val('din' + total.toFixed(2)); 
     $('.total_1').val(total.toFixed(2)); 
    }); 
}); 

var counter = 1; 
$(function(){ 
    $('p#add_field').click(function() { 
     counter += 1; 

     $('.item_1').append('<input type="hidden" name="numItems" id="numItems1' + counter + '" value="' + counter + '"  />' + 
      '<div class="item item_total_' + counter + '"><input type="text" id="total_' + counter + '" class="total_' + counter + '" name="total_' + counter + '" value="<?php set_value("total_' + counter + '"); ?>"/>'+ 
      '<div class="item item_tax_' + counter + '"><input type="text" id="tax_' + counter + '" class="tax_' + counter + '" name="tax_' + counter + '" value="<?php set_value("tax_' + counter + '"); ?>"  />'+ 
      '<div class="item item_neto_' + counter + '"><input type="text" id="neto_' + counter + '" class="neto_' + counter + '" name="neto_' + counter + '" value="<?php set_value("neto_' + counter + '"); ?>"  />'+ 
      '<div class="item item_quantity_' + counter + '"><input type="text" id="quantity_' + counter + '" class="fee quantity_' + counter + '" name="quantity_' + counter + '" value="<?php set_value("quantity_' + counter + '"); ?>"/>'+ 
      '<div class="item item_priceperunit_' + counter + '"><input type="text" id="priceperunit_' + counter + '" class="fee priceperunit_' + counter + '" name="priceperunit_' + counter + '" value="<?php set_value("priceperunit_' + counter + '"); ?>"  />'+ 
      '<div class="item item_description_' + counter + '"><input type="text" id="description_' + counter + '" class="description_' + counter + '" name="description_' + counter + '" value="<?php set_value("description_' + counter + '"); ?>"/>'+ 
      '<div class="item item_unit_' + counter + '"><input type="text" id="unit_' + counter + '" class="unit_' + counter + '" name="unit_' + counter + '" value="<?php set_value("unit_' + counter + '"); ?>"  />' 
     );  
    }); 
}); 

HTML

<input type="hidden" name="numItems" id="numItems1" value="1" /> 
<div class="item item_1"> 
    <div class="item item_unit_1"> 
     <p>Unit</p> 
     <input type="text" id="unit_1" class="unit_1" name="unit_1" value="<?php set_value("unit_1"); ?>"/> 
     <?php echo form_error('unit_1'); ?> 
    </div> 
    <div class="item item_description_1"> 
     <p>Description</p> 
     <input type="text" id="description_1" class="description_1" name="description_1" value="<?php set_value("description_1"); ?>"/> 
     <?php echo form_error('description_1'); ?> 
    </div> 
    <div class="item item_priceperunit_1"> 
     <p>pricepernit</p> 
     <input type="text" id="priceperunit_1" class="fee priceperunit_1" name="priceperunit_1" value="<?php set_value("priceperunit_1"); ?>"/> 
     <?php echo form_error('priceperunit_1'); ?> 
    </div> 
    <div class="item item_quantity_1"> 
     <p>Quantity</p> 
     <input type="text" id="quantity_1" class="fee quantity_1" name="quantity_1" value="<?php set_value("quantity_1"); ?>"/> 
     <?php echo form_error('quantity_1'); ?> 
    </div> 
    <div class="item item_neto_1"> 
     <p>Neto</p> 
     <input type="text" id="neto_1" class="neto_1" name="neto_1" value="<?php set_value("neto_1"); ?>"/> 
     <?php echo form_error('neto_1'); ?> 
    </div> 
    <div class="item item_tax_1"> 
     <p>Tax</p`enter code here`> 
     <input type="text" id="tax_1" class="tax_1" name="tax_1" value="<?php set_value("tax_1"); ?>"/> 
     <?php echo form_error('tax_1'); ?> 
    </div> 
    <div class="item item_total_1"> 
     <p>Total</p> 
     <input type="text" id="total_1" class="total_1" name="total_1" value="<?php set_value("total_1"); ?>"/> 
     <?php echo form_error('tax_1'); ?> 
    </div> 
</div> 

Answer 1

Я не совсем уверен, что проблема у вас возникли, так как вы не размещены какие-либо ошибки, а код является неполной, но я думаю, что код ниже может помочь вам упростить вашу функцию.

У вас может быть столько входных данных здесь, сколько пожелаете. Вы можете дополнительно добавить атрибут типа данных в поля ввода, которые хотите суммировать, и выбрать на основе этого.

HTML:

<form id="myForm"> 
    <input type="text" placeholder="enter number one" /> 
    <input type="text" placeholder="enter number two" /> 
    <div> 
     <label for="calculateSum">Sum is</label> 
     <span id="calculateSum">0</span> 
    </div> 
</form> 

JavaScript:

$(document).ready(function() { 
    $('#myForm').on('keyup', 'input', function() { 
     var iSum = 0; 
     $('#myForm input').each(function() { 
      iSum = iSum + parseFloat($(this).val()); 
     }); 
     $('#calculateSum').html(iSum); 
    }); 
}); 

JSFiddle: http://jsfiddle.net/markwylde/gjz9h/