На странице JSP Подтверждение появляются только при первом нажатии кнопки строки формы. На второй строке формы отправки он не появляется, и мой вызов ajax выполняется

Question

Я разработал весеннее загрузочное веб-приложение, на переднем крае у меня есть JSP-страницы. Я отображаю список пользователей в таблице, и в каждой строке есть соответствующее действие (форма для каждого действия), такое как обновление, сброс, удаление и т. Д. При удалении действия сначала отображается сообщение подтверждения. Если пользователь нажимает Ok, я заставляю Ajax получить вызов Controller, который удаляет пользователя из базы данных и возвращает статус 0 или 1. Я заметил, что при первой записи он показывает подтверждение, а при OK он отправляет вызов, и правильный ответ возвращается обратно. Когда я нажимаю на кнопку удаления второй записи, она не показывает подтверждающее сообщение и отправляет форму, которая возвращает ошибку 405 Метод получения не поддерживается. Я также не наблюдаю никаких других записей о работе в соответствии с поведением.

Мой код JSP такой, как показано ниже

Я пробовал другой способ показать сообщение о подтверждении, например, onclick Я пытался его выполнить, но результат тот же. Я удалил все остальные библиотеки js / css и только j-запрос на моей странице, но он выдает тот же результат. Я также попытался создать простую страницу и смоделировать то же поведение, которое он также показывает.

<div id="disabledContent" class="container border rounded bg-light"
   style="margin-top: 5px; margin-bottom: 10px;">
   <form method="post" action="/createUserDetails">
      <button type="submit" value="Add User"
         class="btn btn-success btn-lg">+</button>
   </form>
   <table class="table table-light">
      <thead class="thead-light">
         <tr>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th colspan="6" scope="col">Actions</th>
         </tr>
      </thead>
      <tbody>
         <c:forEach items="${userList}" var="item">
            <tr>
               <td>${item.firstName}</td>
               <td>${item.lastName}</td>
               <td>
                  <form method="post" action="/assignUserLicense">
                     <input type="hidden" name="userId" value="${item.id}">
                     <input type="hidden" name="customerUniqueId"
                        value="${customerUniqueId}">
                     <button type="submit" value="Assign License"
                        class="btn btn-warning">Assign License</button>
                  </form>
               </td>
               <td>
                  <form method="post" action="/unassignUserLicense">
                     <input type="hidden" name="userId" value="${item.id}">
                     <input type="hidden" name="customerUniqueId"
                        value="${customerUniqueId}">
                     <button type="submit" value="UnAssign License"
                        class="btn btn-warning">Unassign License</button>
                  </form>
               </td>
               <td>
                  <form method="post" action="/modifyUserDetails"
                     id="modifyUserDetailsForm">
                     <input type="hidden" name="userId" id="userId"
                        value="${item.id}"> <input type="hidden"
                        name="customerUniqueId" id="customerUniqueId"
                        value="${customerUniqueId}"> <input type="hidden"
                        name="displayName" id="displayName"
                        value="${item.displayName}"> <input type="hidden"
                        name="userPrincipalName" id="userPrincipalName"
                        value="${item.userPrincipalName}"> <input
                        type="hidden" name="firstName" id="firstName"
                        value="${item.firstName}"> <input type="hidden"
                        name="lastName" id="lastName" value="${item.lastName}">
                     <button type="submit" value="Modify User"
                        class="btn btn-warning">Modify User</button>
                  </form>
               </td>
               <td>
                  <form method="post" action="/resetUserUserDetails">
                     <input type="hidden" name="userId" value="${item.id}">
                     <input type="hidden" name="customerUniqueId"
                        value="${customerUniqueId}">
                     <button type="submit" value="Get User"
                        class="btn btn-warning">Reset Password</button>
                  </form>
               </td>
               <td>
                  <form id="myDeleteFrom">
                     <input type="hidden" name="userId" value="${item.id}">
                     <input type="hidden" name="customerUniqueId"
                        value="${customerUniqueId}">
                     <button type="submit" value="Get User"
                        class="btn btn-warning">Delete User</button>
                  </form>
               </td>
            </tr>
         </c:forEach>
      </tbody>
   </table>
   <div></div>
</div>

мой код JavaScript $ (document) .ready (function () {

                    $("#myDeleteFrom")
                            .submit(
                                    function() {
                                        var confirmResponse = confirm("Are you sure you want to delete this user");

                                        if (confirmResponse) {
                                            //Ajax get call 
                                        } else {
                                            return false;
                                        }
                                    });
                });

Я ожидаю, что это должно работать на любом щелчке кнопки отправки формы удаления строки.