将动态单选按钮添加到JSP表单

Question

我试图向表单中动态添加额外的字段。但是，仅文本/数字字段将按预期方式创建。单选按钮已创建，但选择列表已与所有对象共享。还要注意，我在脚本关闭后关闭了FORM，否则路径FORM输入将抛出错误。我知道我缺少什么吗？预先谢谢你。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-5 p-1">
    <form:form method="POST" modelAttribute="investmentForm" class="p-4">
        <div class="row">
            <div class="col-lg-12">
                <div id="inputFormRow">
                    <div class="form-group">
                        <label><h5><b>Invoice ID</b></h5></label>
                        <form:input path="invoiceNumber" name="invoiceNumber[]" class="form-control m-input" placeholder="E001-1234" required="required" />
                    </div>
                    <div class="form-group">
                        <label><h5><b>Amount</b></h5></label>
                        <form:input path="amountForm" name="amount[]" type="number" class="form-control m-input"  step=".01" required="required" min="1" max="10000"/>
                    </div>
                    <label><h5><b>Currency</b></h5></label>
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                            <form:radiobuttons class="form-check-input" path="currency" items="${curr}"/>
                        </label>
                    </div>
                </div>
                <div id="newRow"></div>
                <button id="addRow" type="button" class="btn btn-info">Add Row</button>
            </div>
        </div>
        <button type="submit" class="btn mt-4 btn-block p-2 btn-success shadowed">Invest!</button>


<script type="text/javascript">
    // add row
    var counter = 1;
    $("#addRow").click(function () {
        counter += 1;
        var html ='<div id="inputFormRow">'
            +'<div class="form-group">'
            +'<label><h5><b>Invoice ID</b></h5></label>'
            +'<form:input path="invoiceNumber" name="invoiceNumber[]" class="form-control m-input" placeholder="E001-1234" required="required" />'
            +'</div>'
            +'<div class="form-group">'
            +'<label><h5><b>Amount</b></h5></label>'
            +'<form:input path="amountForm" name="amount[]" type="number" class="form-control m-input"  step=".01" required="required" min="1" max="10000"/>'
            +'</div>'
            + '<div class="form-group">'
            +'<label><h5><b>Currency</b></h5></label>'
            +'<div class="form-check form-check-inline">'
            +'<label class="form-check-label">'
            +'<form:radiobuttons class="form-check-input" path="currency" items="${curr}"/>'
            +'</label>'
            +'</div>'
            +'<div class="input-group-append">'
            +'<button id="removeRow" type="button" class="btn btn-danger">Remove</button>'
            +'</div>'
            +'</div>'

        $('#newRow').append(html);
    });

    // remove row
    $(document).on('click', '#removeRow', function () {
        $(this).closest('#inputFormRow').remove();
    });
</script>
</form:form>