Помогите с реализацией передачи данных в модальное окно. Есть шаблонный контейнер, в который динамически поступают данные: картинка, имя, цена, описание, состав и айди продукта. Таких контейнеров отображается сотни на странице.
<div class="product_example text-center p-2">
<img alt="food1" class="img-fluid" src=<?php echo $image_product; ?> >
<div>
<h4><?php echo $name_product; ?></h4>
<h5>Цена: <?php echo $price_product; ?> грн</h5>
<button <?php echo $id_product ?> type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#modalwindow">Купить</button>
</div>
И при нажатии на клавишу появляется модальное окно, в которое я хотел передать все эти данные тоже.
<div class="modal scrollbar scrollbar-secondary" tabindex="-1" role="dialog" id="modalwindow" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><?php echo $name_product; ?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<img alt="chocolate" class="img-fluid" src=<?php echo $image_product; ?> >
</div>
<div class="row">
<h5 class="col-8">Цена:</h5>
<h5 class="col-4 text-right"><?php echo $price_product; ?> грн</h5>
</div>
<div class="row modal_price my-1 align-middle py-1">
<h5 class="col-6 my-0">Кол-во:</h5>
<div class="col-6 text-right row mx-0">
<button class="btn_minus ml-auto" onclick="take_away()">-</button>
<input type="text" value="1" class="count_product col-3 text-center">
<button class="btn_plus" onclick="add_count_product()">+</button>
</div>
</div>
<p><?php echo $description_product; ?></p>
<h5>Состав:</h5>
<ul>
<?php echo $structure_product; ?>
</ul>
</div>
<script>
var price_product='<?= $price_product ?>';
</script>
<div class="modal-footer">
<div class="row">
<h5 class="col-8 p-0">Цена:</h5>
<h5 class="col-4 text-right p-0">
<span id="final_cost"><?php echo $price_product; ?></span>
грн</h5>
</div>
<div class="row mt-2">
<div class="col-6 pl-0 pr-1">
<button type="button" class="btn btn-secondary btn-lg btn-block">В избранное</button>
</div>
<div class="col-6 text-right pl-1 pr-0">
<button type="button" class="btn btn-primary btn-lg btn-block">В корзину</button>
</div>
</div>
</div>
</div>
</div>
Но так как модальное окно тоже реализовано тоже шаблонно, при вызове его высвечивается последние данные которыми я заполнял контейнер. Т.е. получается не соответствие между содержимым контейнера и модального окна. Помогите правильно реализовать передачу данных. P.S. Пишу на чистом JavaScript.