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?
 
    