Таблица с одинаковой кнопкой отправки в каждой строке: первая кнопка отправки не работает (несколько одинаковых идентификаторов?)

Question

У меня есть таблица, которая показывает файлы продукта. Файл может иметь добавленную заметку. Если заметка была добавлена, она отображается в строке. Если нет, вместо этого отображается поле текстовой области с кнопкой отправки.

Короткая история, все работает, кроме первого ряда без примечания. После ввода заметки и нажатия кнопки «Отправить» ничего не происходит.

HTML:

<div id="files-list" style="display: none">
        <table class="table">
            <thead>
                <tr>
                    <th>File</th>
                    <th>Date</th>
                    <th>Notes</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <c:if test="${fn:length(bean.product.files)>0}"> 
                <c:forEach items="${bean.product.files}" var="na">
                    <tr>
                        <td><a href="${pageContext.request.contextPath}/products/files/${na.id}.do">${na.name}</a></td>
                        <td><fmt:formatDate value="${na.created}" pattern="yyyy-MM-dd HH:mm" /></td>
                        <td>
                            <c:if test="${empty na.note}">
                                <form:form id="${na.id}" method="POST" modelAttribute="bean" action="${pageContext.request.contextPath}/app/updateFile.ajax?id=${bean.product.id}&fileId=${na.id}" style="display: inline">                             
                                    <form:textarea path="prodFiles" rows="1" cols="50" />
                                    <input type="hidden" name="version" value="${bean.product.version}">
                                    <input type="submit" id="submitButton" value="Save it!" />
                                </form:form>    
                            </c:if>
                            <c:if test="${not empty na.note}">
                                <div style="max-width: 400px">${na.note}</div>                          
                            </c:if>
                        </td>
                        <td><button type="button" class="btn btn-xs btn-danger" onclick="$().mkdelformTable('${pageContext.request.contextPath}/app/deleteFile.ajax?id=${bean.product.id}&fileId=${na.id}', this)">Delete it!</button></td>
                    </tr>
                </c:forEach>
                </c:if>
            </tbody>
        </table>
    </div>

Возможные подсказки:

1. Когда я открываю стол (это всплывающая консоль отображает несколько [DOM] Found X elements with non-unique id ошибок
2. Проверка элементов в инструментах разработчика Я заметил, что первая строка не содержит часть формы. Возможно, связано с проблемой множественных идентичных идентификаторов. Пример:

<td>                                                                
   <textarea id="prodFiles" name="prodFiles" rows="1" cols="50"></textarea>
   <input type="hidden" name="version" value="181">
   <input type="submit" id="submitButton" value="Save it!">
</td>

VS

<td>                            
   <form id="65" style="display: inline" action="/oferty/app/updateFile.ajax?id=12701&amp;fileId=65" method="POST">                             
      <textarea id="prodFiles" name="prodFiles" rows="1" cols="50"></textarea>
      <input type="hidden" name="version" value="181">
      <input type="submit" id="submitButton" value="Save it!">
   </form>  
</td>

Редактировать: Кроме того, можно добавлять новые файлы, чтобы нельзя было жестко кодировать разные имена / идентификаторы, если предлагается.

Answer 1

Как я узнал, был какой-то устаревший код. Мне удалось избавиться от «нескольких одинаковых идентификаторов» и т. Д. c. ошибки, добавив заметку в дополнительном всплывающем окне - на предыдущей странице ios вместо ввода я включил кнопку в новое всплывающее окно.