如何使用新的表单路径向jsp表添加新行

Question

我有personal_rate_panel.jsp。在这里，我以这种方式编写表单发布方法：

<table class="std-table" style="width: 100%;" id="rates">
            <thead>
            <tr>
                <th>
                    <spring:message code="table.header.currency"/>
                </th>
                <th>
                    <spring:message code="table.header.operation.type"/>
                </th>
                <th>
                    <spring:message code="table.header.rate"/>
                </th>
                <th>
                    <spring:message code="table.header.limit.amount"/>
                </th>
            </tr>
            </thead>
            <tbody>
            <form:form method="POST" cssClass="forms" id="formRateSubmit" action="${urlRates}"
                       modelAttribute="individualRateList">
                <c:forEach var="individualRate" items="${individualRateList.individualRates}" varStatus="idx">
                    <tr id="row1">
                        <td id="currency_row1">
                            <form:select path="individualRates[${idx.index}].currency" id="listOfCurrency1">
                                <form:option selected="selected" value=""><spring:message code="label.please.select"/></form:option>
                                <c:forEach var="item" items="${currencyRates}" varStatus="loop">
                                    <form:option value="${item.currency}" >${item.currency}</form:option>
                                </c:forEach>
                            </form:select>
                        </td>
                        <td id="operation_row1">
                            <form:radiobutton path="individualRates[${idx.index}].operation" value="Buying" checked="true"/><spring:message code="label.buying.operation"/>
                            <form:radiobutton path="individualRates[${idx.index}].operation" value="Selling"/> <spring:message code="label.selling.operation"/>
                        </td>
                        <td id="rate_row1">
                            <form:input type="text" path="individualRates[${idx.index}].rate" id="txtRate1" size="10"/>
                        </td>
                        <td id="amount_row1">
                            <form:input type="text" path="individualRates[${idx.index}].amount" id="txtAmount1" size="10"/>
                        </td>
                        <td>
                            <a href="javascript:void(0);" id="deleteRow1" class="btn-remove"
                               style="color: #f00; text-decoration: none;" onclick="deleteRow('1')">X</a>
                        </td>
                    </tr>
                </c:forEach>
            </form:form>
            </tbody>
        </table>

当我将此程序运行1行时，它运行良好。但是我有用于添加新行的按钮。当我添加新行时，该行将获得相同的路径名（对于货币，其路径名为divineRates [0] .currency）。 addRow按钮的工作方式如下：

$('#addRow').click(function () {
            $('#rates tbody>tr:last').clone(true).insertAfter('#rates tbody>tr:last');
        });

为什么路径名没有正确更改？

IndividualRateList and IndividualRate classes:
public class IndividualRate {
    private String currency;
    private String operation;
    private double rate;
    private double amount;
......
}

public class IndividualRateList {

    private List<IndividualRate> individualRates = new ArrayList<>();
    ...
}