Переменная связывания из функции javascript

Question

Я пытаюсь создать эту страницу в своем приложении, но эта ошибка сводит меня с ума. Я отображаю некоторые поля моей формы form в таблице. В четвертом столбце я хочу отобразить выпадающее меню с элементами form.VATcodeList. Выбранное значение будет связано через path="fieldNameInMyJavaBean" в моем Java Bean (которое явно имеет свойство fieldNameInMyJavaBean).

В первом sf:select я могу правильно видеть свое выпадающее меню. Во втором (в функции javascript addRow()) я получил эту ошибку:

Ни BindingResult, ни простой целевой объект для имени компонента 'fieldNameInMyJavaBean' не доступны в качестве атрибута запроса

Спасибо за вашу помощь !!

Это моя. jsp страница:

<sf:form method="POST" action="somewhere" modelAttribute="form">
    <div class="table-responsive col-md-10">
        <table id="tabella" class="table table-fixed">
            <thead>
                <tr> ... </tr>
            </thead>
            <div class="panel-group no-margin-bottom col-xs-12 no-padding">
                <tbody class="h-scroll">
                    <c:forEach items="${form.rowList}" var="row" varStatus="status">
                        <tr>
                            <td> ... </td> 
                            <td> ... </td>
                            <td>
                                <sf:select path="fieldNameInMyJavaBean" class="form-control">
                                    <sf:option value="${row.VATPerc}" label="${row.lawRef}" cssClass="tile blue"></sf:option>
                                    <c:forEach items="${form.VATcodeList}" var="item">
                                        <sf:option value="${item.VATPerc}">
                                            <c:out value="${item.lawRef}" />
                                        </sf:option>
                                    </c:forEach>
                                </sf:select>
                            </td> 
                            <td> ... </td> 
                            <td> <button type="button" class="btn btn-danger small-button-width" onclick="removeRow(this)">-</button> </td>
                        </tr>
                    </c:forEach>
                </tbody>                                
                <tbody id="bodyToAdd" class="h-scroll" style="background-color:#CCFFE5;">
                </tbody>
                <tbody>
                    <tr> 
                        <td></td> <td></td><td></td><td></td>
                        <td> <button type="button" class="btn btn-success small-button-width" onclick="addRow()">+</button> </td>                                           
                    </tr>
                </tbody>
            </div>
        </table>
    </div>
</sf:form>

, а это моя javascript:

function addRow() {
    const tr = document.createElement('tr');

    tr.innerHTML = `
        <td>...</td>
        <td>...</td>
        <td>
            <sf:select path="fieldNameInMyJavaBean" class="form-control">
            <sf:option value="" label="*****" cssClass="tile blue"></sf:option>
                <c:forEach items="${form.VATcodeList}" var="item">
                    <sf:option value="${item.VATPerc}">
                        <c:out value="${item.lawRef}" />
                    </sf:option>
                </c:forEach>
            </sf:select>
        </td> 
        <td>...</td>
        <td> <button type="button" class="btn btn-danger small-button-width" onclick="removeRow(this)">-</button></td>
    `;

    document.getElementById('bodyToAdd').appendChild(tr);
    };