I'm programming a website in php and want to show a modal popup in my sql query.
My problem is, it shows only on the last entry.
Here is my code:
$result = $db->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo' <div class="container_mytickets">
<div class="card_shop">';
if ($row["helpdesk_admin_msg"] !== ""){
echo'
<p class="title">'.$var_helpdesk_ticket_problem_description.': <br>'. $row["helpdesk_user_msg"].'</p>
<p class="title">'.$var_helpdesk_ticket_number.': '. $row["helpdesk_timestamp"].'</p>
<button id="myBtn">'.$var_helpdesk_my_tickets_see_answer.'</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div class="card_modal">
<h1>'.$var_helpdesk_ticket_number.': '. $row["helpdesk_timestamp"].'</h1>
<p class="title">'.$var_helpdesk_ticket_problem_description.': <br>'. $row["helpdesk_user_msg"].'</p><br><br>
<p class="title">'.$var_helpdesk_my_tickets_answer.':<br> '. $row["helpdesk_admin_msg"].'</p>
</div>
</div>
</div>
<script src="../../script/modalpopup.js" defer></script>
</div>
</div>';
And here my modalpopup.js
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
So how i have to write the code to get the modal working on each query row?