Javascript 动态添加的输入的产品/添加不工作jquery

我有一个表格，它是第一行值的乘积

我有一个动态添加输入值的表单。这里第一行输入数量*产品=总计正常工作，但下一个添加的元素保存第一个输入的总计并传递给所有下一个元素。 在这里，我想得到所有单个的qty*product=total，并计算所有输入值的总数

这是我的工作小提琴

这是我的jquery脚本

    $(document).ready(function() {
        var total_input = 1;
        var temp_arr = [];  

        function calculateFinal(){
            var final_val = 0;
            $('.total').each(function(){
                final_val += parseFloat($(this).val());                                    
            });
            $('#final_total').val(final_val);            
        }

        jQuery(document).ready(function($){

            temp_arr[0] = total_input;
            $('.my-form .add-box').click(function(){
                var n = $('.text-box').length + 1;
                if( 10 < n ) {
                    alert('Stop it!');
                    return false;
                }
                ++total_input;
                temp_arr.push(total_input);
                var box_html = $('<p class="text-box"> <input type="text" name="size['+total_input+']"  class="add" value="" id="box1' + total_input + '" /> <input type="text" name="qty['+total_input+']" class="add" value="" id="box2' + total_input + '" /> Sub-Total: <input name="sum['+total_input+']" class="total" value=""/> <a href="#" rel="'+total_input+'" class="remove-box">Remove</a></p>');
                jQuery('#my-form').append(box_html);
                box_html.hide();
                $('.my-form p.text-box:last').after(box_html);
                box_html.fadeIn('slow');
                return false;
            });

            $('.my-form').on('click', '.remove-box', function(){
                var this_rel = $(this).attr('rel');
                $(this).parent().css( 'background-color', '#FF6C6C' );
                $(this).parent().fadeOut("slow", function() {
                    var len = temp_arr.length;
                    for(i=0;i<len;i++){  
                        if(temp_arr[i] == this_rel){
                            temp_arr.splice(i,1);                                 
                        }
                    }
                    $(this).remove();
                    calculateFinal();
                    $('.box-number').each(function(index){
                        $(this).text( index + 1 );
                    });
                });
                $('span.total').html( $('input.add').sumValues() );

                return false;
            });
        });

        $.fn.sumValues = function(i) {
            var sum = 0; 
            this.each(function() {
                if ( $(this).parent().find('input.add') ) {
                    var obj = $(this).parent().find('input.add');
                    if(obj.val()!='' || typeof obj != "undefined"){
                        var val = 0;
                        $(obj).each(function(){
                            val = parseFloat($("#box1").val()*$("#box2").val());  

                        });
                        sum += parseFloat( ('0' + val).replace(/[^0-9-\.]/g, ''), 10 ); 
                        $('input[name="sum['+i+']"]').val(sum);                        
                    }

                }


            });


            return sum;
        };

        $(document).ready(function() {
            $(document).on('keyup','input.add', function() {
                var len = temp_arr.length;
                for(i=0;i<len;i++){  
                    $('input.total').html( $('input[name="sum['+temp_arr[i]+']"]').sumValues(temp_arr[i]) );
                    calculateFinal();
                }
            });

        });
    });

$（文档）.ready（函数（）{
var总输入=1；
var temp_arr=[]；
函数calculateFinal（）{
var final_val=0；
$（'.total'）。每个（函数（）{
final_val+=parseFloat（$（this.val（））；
});
$（'final#u total'）.val（final#val）；
}
jQuery（文档）.ready（函数（$）{
温度arr[0]=总输入；
$（'.my form.add box'）。单击（函数（）{
var n=$（'.text box'）。长度+1；
if（10）；
jQuery（“#我的表单”）.append（box#html）；
box_html.hide（）；
$（'.my form p.text-box:last'）。在（box_html）之后；
box_html.fadeIn（'slow'）；
返回false；
});
$（'.my form'）。在（'单击'，'.remove box'，函数（）上{
var this_rel=$（this.attr（'rel'）；
$（this.parent（）.css（'background color'，'#FF6C6C'）；
$（this.parent（）.fadeOut（“slow”，function（））{
var len=温度和长度；
对于（i=0；iUpdate you keyup）事件：

$(document).on('keyup', 'input.add', function() {
    var parent = $(this).closest('.text-box');//get the parent
    var val = parseFloat(parent.find("input:eq(0)").val()) * parseFloat(parent.find("input:eq(1)").val());//calculate using the parent inputs

    $(this).closest('.text-box').find('.total').val(val);//append to the parent total
    calculateFinal();//caculate the total
  });

演示：

对于NaN，您可以在表单中删除一些默认值或执行一些验证

您需要计算每一行的总计，前面的代码是基于ID搜索输入的，将仅使用这些ID获取第一个输入，我的代码基于parent.text box元素获取输入，以便正确计算每一行的总计