计算不'；不能在javascript动态创建的HTML字段中工作

在第一个脚本（javascript）中，我正在创建动态html表单，用户可以在其中动态添加新的输入字段。在同一文件中的第二个脚本（javascript）中，我想自动计算字段，但它不起作用，我不知道为什么。请帮帮我。我想用字段netunit乘以字段quantity，得到nettotal中的值，用grossunit乘以字段quantity，得到值grosstotal

<script>
$(document).ready(function(){

 var count = 1;

 dynamic_field(count);

 function dynamic_field(number)
 {
  html = '<tr>';
        html += '<td><input type="text" name="name[]" id="num1" class="input form-control form-control-lg" /></td>';
        html += '<td><input type="text" name="PKWIU[]" id="num2" class="input form-control form-control-lg" /></td>';
        html += '<td><input type="text" name="quantity[]" id="num3" class="input form-control form-control-lg" /></td>';
        html += '<td><input type="text" name="unit[]" id="num4" class="input form-control form-control-lg" /></td>';
        html += '<td><input type="text" name="netunit[]" id="num5" class="input form-control form-control-lg" /></td>';
        html += '<td><input type="text" name="nettotal[]" id="num6" class="input form-control form-control-lg" /></td>';
        html += '<td><input type="text" name="VATrate[]" id="num7" class="input form-control form-control-lg" /></td>';
        html += '<td><input type="text" name="grossunit[]" id="num8" class="input form-control form-control-lg" /></td>';        
        html += '<td><input type="text" name="grosstotal[]" id="num9" class="input form-control form-control-lg" /></td>';
        if(number > 1)
        {
            html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
            $('tbody').append(html);
        }
        else
        {   
            html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
            $('tbody').html(html);
        }
 }

 $(document).on('click', '#add', function(){
  count++;
  dynamic_field(count);
 });

 $(document).on('click', '.remove', function(){
  count--;
  $(this).closest("tr").remove();
 });

 $('#dynamic_form').on('submit', function(event){
        event.preventDefault();
        $.ajax({
            url:'{{ route("invoice-dynamic-field.insert") }}',
            method:'get',
            data:$(this).serialize(),
            dataType:'json',
            beforeSend:function(){
                $('#save').attr('disabled','disabled');
            },
            success:function(data)
            {
                if(data.error)
                {
                    var error_html = '';
                    for(var count = 0; count < data.error.length; count++)
                    {
                        error_html += '<p>'+data.error[count]+'</p>';
                    }
                    $('#result').html('<div class="alert alert-danger">'+error_html+'</div>');
                }
                else
                {
                    dynamic_field(1);
                    $('#result').html('<div class="alert alert-success">'+data.success+'</div>');
                }
                $('#save').attr('disabled', false);
            }
        })
 });

});
</script>


<script>
$(".input").on('input', function(){

    var x = document.getElementById('num3').value;
    x = parseFloat(x);

    var y = document.getElementById('num5').value;
    y = parseFloat(y);

    if(Number.isNaN(x))
    x=0;
    else if(Number.isNaN(y))
    y=0;
    
    document.getElementById('num6').value= x * y;

    var z = document.getElementById('num8').value;
    z = parseFloat(y);

    document.getElementById('num9').value= x * z;

});

</script>

$（文档）.ready（函数（）{
var计数=1；
动态_字段（计数）；
函数动态_字段（编号）
{
html=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
如果（数字>1）
{
html+=“删除”；
$（'tbody'）.append（html）；
}
其他的
{   
html+=“添加”；
$（'tbody'）.html（html）；
}
}
$（文档）。在（'单击'，'添加'，函数（）上）{
计数++；
动态_字段（计数）；
});
$（文档）。在（'单击'，'删除'，函数（）上）{
计数--；
$（this）.tr.remove（）；
});
$（“#动态表单”）。关于（'submit'，函数（事件）{
event.preventDefault（）；
$.ajax({
url:“{route（“invoice dynamic field.insert”）}}”，
方法：'get'，
数据：$（this）.serialize（），
数据类型：'json'，
beforeSend:function（）{
$（'#save'）.attr（'disabled'，'disabled'）；
},
成功：功能（数据）
{
if（data.error）
{
var error_html=''；
对于（var count=0；count'；
}
$（'#result'）.html（''+error_html+''）；
}
其他的
{
动态_场（1）；
$（'#result'）.html（''+data.success+''）；
}
$（'#save'）.attr（'disabled'，false）；
}
})
});
});
$（“.input”）.on（'input'，function（）{
var x=document.getElementById（'num3'）。值；
x=parseFloat（x）；
var y=document.getElementById（'num5'）.value；
y=浮动（y）；
if（编号：isNaN（x））
x=0；
else if（编号：isNaN（y））
y=0；
document.getElementById（'num6'）。值=x*y；
var z=document.getElementById（'num8'）。值；
z=浮点（y）；
document.getElementById（'num9'）。值=x*z；
});

您的主要问题是，当您运行

add

代码时，您将获得重复的id

我重写了代码以使用类而不是id

演示

$（文档）.ready（函数（）{
var计数=1；
动态_字段（计数）；
函数动态_字段（编号）{
html=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
如果（数字>1）{
html+=“删除”；
$（'tbody'）.append（html）；
}否则{
html+=“添加”；
$（'tbody'）.html（html）；
}
}
$（文档）。在（'单击'，'添加'，函数（）上）{
计数++；
动态_字段（计数）；
});
$（文档）。在（'单击'，'删除'，函数（）上）{
计数--；
$（this）.tr.remove（）；
});
$（“#动态表单”）。关于（'submit'，函数（事件）{
event.preventDefault（）；
$.ajax({
url:“{route（“invoice dynamic field.insert”）}}”，
方法：“get”，
数据：$（this）.serialize（），
数据类型：“json”，
beforeSend:function（）{
$（'#save'）.attr（'disabled'，'disabled'）；
},
成功：功能（数据）{
if（data.error）{
var error_html=''；
对于（var count=0；count'；
}
$（'#result'）.html（''+error_html+''）；
}否则{
动态_场（1）；
$（'#result'）.html（''+data.success+''）；
}
$（'#save'）.attr（'disabled'，false）；
}
})
});
});
$（document）.on（'input'，.input'，function（）{
var tr=$（此）.tr；
var x=tr.find（“.num3”）.val（）；
x=parseFloat（x）；
var y=tr.find（“.num5”）.val（）
y=浮动（y）；
if（编号：isNaN（x））
x=0；
else if（编号：isNaN（y））
y=0；
tr.find（“.num6”）.val（x*y）；
var z=tr.find（“.num8”）.val（）；
z=浮点（z）；
tr.find（“.num9”）.val（x*z）；
});
1我看到的问题是，当您运行
dynamic\u field（count）
时，它将再次添加html，这将导致重复的id。请记住，所有ID必须是唯一的。如果你能为你的代码创建一个工作示例，那也太好了。