Как вывести информацию из базы данных в модальное окно?

Question

[S_Tigrov]

Есть база данных, из которой на сайт выводятся все элементы. При нажатии на любой из элементов открывается модальное окно с подробной информацией. Как сделать так, чтобы информация в модальном окне менялась в зависимости от того на какой элемент я нажал?

Это код вывода всех элементов из базы:

while ($row = mysqli_fetch_array($search_result)) {
						
					?>

						<div id="<?= $row[0] ?>" class="book">
							<div id="open_popup" class="book_img">
								<img src="img/<?= $row[3] ?>" alt="">
								<div class="rating"><?= $row[4] ?></div>
							</div>
							<div class="name"><?= $row[1] ?></div>
							<div class="author"><?= $row[2] ?></div>
						</div>

					<?php
				}

Код открытия и закрытия модального окна:

var elements = document.querySelectorAll(".book_img");
for (var i = 0; i < elements.length; i++) {
	elements[i].onclick = function(){
		document.getElementById("popup").classList.add("open");
	}
}

document.getElementById("close_popup").onclick = function(){
	document.getElementById("popup").classList.remove("open");
}

Код для модального окна

<div class="popup" id="popup">
		<div class="popup_window" id="popup_window">
                 </div>
</div>

Comments

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

Answer 1

[humoured]

Дай каждому elements[i] html-аттрибут типа data-id="444", бери это значение в обработчике события и используй в AJAX-запросе для поиска соответствующего блока с информацией.

Answer 2

[Олег]

Похоже курсы Евгения Попова живы) На самом деле посмотрите в сторону MVC паттерна, так Вы сможете отделить бизнес логику от представления, тем самым в модальное окно можно будет проще пробросить необходимые данные.

Дальше можно идти на разделения фронта и бэка - React JS + Backend (PHP, GO и т.п)