Как реализовать модальное окно с динамически заполняемым содержимым?
Пишу веб-приложение, используя Spring Boot и Freemarker. Есть таблица с информацией о товарах, которая заполняется динамически из БД. Нужно реализовать редактирование этой информации. Для этого использую Jqueri.min.js и bootstrap.min.js, подключенные к html с помощью CDN. Сделал я это в модальном окне, куда поместил форму редактирования, поля в которой заполняются первоначальными данными о товаре. Однако редактируется только первый товар даже при нажатии по кнопке редактирования других товаров. Как мне это исправить?
<!DOCTYPE HTML>
<html lang="ru">
<head>
<title>Кальян-Бар "Яма"</title>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<h3>Создать товар</h3>
<div class="create">
<div class="create-product">
<form action="/admin" method="post" enctype="multipart/form-data">
Название категории: <input type="text" name="type" required/><br><br> Название товара: <input type="text" name="name" required/><br><br> Цена: <input type="text" name="price" required/><br><br> Фото: <input type="file" name="file" /><br><br>
<input type="submit" value="Добавить товар" />
</form><br><br>
<h3>Редактирование главной страницы</h3>
</div>
<div class="create-home">
<form action="/home/edit/desEdit" method="post">
Первый текст <textarea rows="10" cols="45" name="firstText">${description.firstText}</textarea> Второй текст <textarea rows="10" cols="45" name="secondText">${description.secondText}</textarea> Третий текст <textarea rows="10" cols="45" name="thirdText">${description.thirdText}</textarea><br><br>
<input type="submit" value="Внести изменения">
</form><br><br>
<form action="/home/edit/imageEdit" method="post" enctype="multipart/form-data">
1 линия <input type="file" name="file1" /> 2 линия <input type="file" name="file2" /> 3 линия <input type="file" name="file3" /><br><br> Нижняя линия с фотографиями <input type="file" name="fileLeft" />
<input type="file" name="fileCentre" />
<input type="file" name="fileRight" /><br><br>
<input type="submit" value="Изменить фото">
</form>
</div>
</div>
<script src="/static/js/validate-script.js"></script>
<h4>Панель администратора</h4>
<table border="1">
<tr>
<th>Категория</th>
<th>Название</th>
<th>Цена</th>
<th>Редактирование</th>
<th>Удаление</th>
</tr>
<#list products as product>
<tr>
<th>${product.type}</th>
<th>${product.name}</th>
<th>${product.price}</th>
<th><button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#myModal">Редактировать</button></th>
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Редактирование товара</h5>
</div>
<div class="modal-body">
<form action="/admin/edit/${product.id}" method="post" enctype="multipart/form-data">
Название категории: <input type="text" name="type" value="${product.type}" /><br><br> Название товара: <input type="text" name="name" value="${product.name}" /><br><br> Цена: <input type="text" name="price" value="${product.price}" /><br><br> Фото: <input type="file" name="file" /><br><br>
<input type="submit" value="Добавить товар" />
</form>
</div>
</div>
</div>
</div>
<th>
<form action="/admin/delete/${product.id}" method="post">
<input type="submit" value="Удалить" />
</form>
</th>
</tr>
<#else>
<h3>Товаров нет</h3>
</#list>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>