как сделать модальное окно для редактирования пользователя без js?

я пытаюсь разобраться в верстке и джаве. у меня есть CRUD приложение, но мне его нужно красиво оформить с помощью bootstrap. мне нужно сделать модальное окно для каждого юзера и иметь возможность редактировать его там. я не могу понять в чем проблема. мой код html:

    <!--               таблица юзеров-->
<div class ="container fluid text-center" id="tableFon">
    <div id="table" >
        <thead>
        <table class="table table-bordered">
            <tr class="table-borderless">
                <th>ID</th>
                <th>Username</th>
                <th>Password</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        <tbody>
        <th:block th:each="user : ${users}">
            <tr class="table-borderless">
                <td  th:utext="${user.getId()}">id</td>
                <td  th:utext="${user.getUsername()}">username</td>
                <td  th:utext="${user.getPassword()}">password</td>


    <!--             кнопка для запуска модальных окон-->


                <td th:width="20"><form th:href="@{/admin/user-update/{id}(id = ${user.getId()})}" th:object="${user}"  ><button type="button" th:href="${'#edit'+user.getId()}"
                                                                      size="10" class="btn btn-info"  data-toggle="modal"  >Edit</button></form></td>

                <td th:width="20"><form th:method="DELETE" th:action="@{/admin/users/{id}(id=${user.getId()})}" ><button type="submit" size="10" class="btn btn-danger" th:method="DELETE" >Delete</button></form></td>
            </tr>
        </th:block>
        </tbody>
        </table>
        </thead>
    </div>

    <!--               модальное окно для редактирования юзера-->
    <div id="exampleModal" th:each="userEdit: ${users}" th:id="${'edit'+userEdit.getId()}" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form  type="submit" th:method = "PATCH" th:href="@{/admin/user-update/}" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Изменить пользователя:</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                        <label  for="username">Enter username:</label>
                        <input type = "text" th:field="*{username}" id ="username"/>
                     <label for="password">Enter password:</label>
                    <input type = "text" th:field = "*{password}" id ="password"/>
                    <select size="3" name="roles" id="roles" multiple="multiple">
                        <option disabled>Roles:</option>
                        <option value="2">ADMIN</option>
                        <option  value="1">USER</option>
                    </select>

                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                      <button type="submit"  class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
        </form>
    </div>


</div>

[![мои методы контроллера][1]][1]


  [1]: https://i.stack.imgur.com/NeXBe.png