Want to call each card data in their modal PHP - php

Question

I want to give extra data of my card in modal where I'm trying to access card id and their data in the modal of the same card.
but I tried the same PHP code into modal but it gave me data of every id in one modal just because I didn't specify the accurate id.
This is my card code:
<?php
$postquery="SELECT * FROM card";
$run=mysqli_query($db,$postquery);
?>
<section>
<div class="container1">
<?php
while($card=mysqli_fetch_assoc($run)){
?>
<div class="container__card">
<div class="container__card--content">
<img src="../images/<?=getcardimagesinfo($db,$card['id'])?>" style="width:100%;
height:100px !important"/>
<h3><?=$card['Name']?></h3>
<h3><?=$card['id']?></h3>
<button type="button" id="modalss" class="a modalss" data-bs-toggle="modal" data-bs-
target="#exampleModal">Start</button>
</div>
</div>
<?PHP
}
?>
</div>
This one is my modal
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-
hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-light" id="exampleModalLabel">Card full Information</h5>
<button type="button" class="btn-close" data-id data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body" style="color:white;">
<?PHP
while($card=mysqli_fetch_assoc($run)){
?>
<h6>Description: <?=$card['Description']?></h6>
<h6>Hint: <?=$card['hints']?></h6>
<?php
}
?>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Save</button>
</div>
</div>
</div>
</div>

Answer 1

First of all render all of your cards:
<?php
$postquery="SELECT * FROM card";
$run=mysqli_query($db,$postquery);
$allCards = [];
while($card=mysqli_fetch_assoc($run))
{
$allCards[] = $card;
}
?>
<section>
<div class="container1">
<?php
foreach($allCards as $card){
$cardId = $card['id'];
$img = getcardimagesinfo($db,$cardId);
?>
<div class="container__card">
<div class="container__card--content">
<img src="../images/<?=$img?>" style="width:100%; height:100px !important" alt="Image of card"/>
<h3><?=$card['Name']?></h3>
<h3><?=$card['id']?></h3>
<button id="card-<?=$cardId?>" type="button" class="a modalss"
onclick="updateModalContent(this)"
data-bs-toggle="modal" data-bs-target="#exampleModal">
Start
</button>
</div>
</div>
<?php } ?>
</div>
</section>
Then embed your modal at the bottom of your page content.
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-light" id="exampleModalLabel">Card full Information</h5>
<button type="button" class="btn-close" data-id data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body" style="color:white;">
<h6>Description: <span id="modal-card-description"></span></h6>
<h6>Hint: <span id="modal-card-hint"></span></h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Save</button>
</div>
</div>
</div>
</div>
Finally add JavaScript section at the bottom to handle updating data in the modal window:
<script>
// This contains all cards info as Json object in javascript when the page is loaded
var allCards = <?php echo json_encode($allCards);?>;
// Button click handler
function updateModalContent(clickedButton)
{
let cardId = clickedButton.id.split("-")[1];
let thisCardInfo = allCards[cardId];
document.getElementById('modal-card-description').innerHTML = thisCardInfo.description;
document.getElementById('modal-card-hints').innerHTML = thisCardInfo.hints;
// and so on ....
}
</script>