仅打开第一个模态

Question

I am trying to get this modal script to work, but for some reason only the first div opens and closes pretty sure it has something to do with php. This code is copied from w3schools and has been edited.

HTML/PHP:

<?php
try
{
$sQuery= "SELECT * FROM maillijst ORDER BY naam ASC";

$oStmt = $db->prepare($sQuery);
$oStmt->execute();

while($rij = $oStmt->fetch(PDO::FETCH_ASSOC))
{
?>

<!-- Modal content -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close">&times;</span>
    <h2><?php echo($rij['naam']); ?></h2>
  </div>

  <div class="modal-body">
    <p><?php echo($rij['couponcode']); ?></p>
  </div>

  <div class="modal-footer">
    <h3><?php echo($rij['email']); ?></h3>
  </div>
 </div>

<?php
}
}
catch(PDOException $e)
{
    $sMsg = '<p>
            Regelnummer: '.$e->getLine().'<br/>
            Bestand: '.$e->GetFile().'<br/>
            Foutmelding: '.$e->getMessage().'
        </p>';

    trigger_error($sMsg);
}
$db=NULL;
?>

JAVASCRIPT:

 <script>
 // Get the modal
 var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

 // Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];

  // When the user clicks the button, open the modal
 btn.onclick = function() {
    modal.style.display = "block";
   }

 // When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
      }

      // When the user clicks anywhere outside of the modal, close it
          window.onclick = function(event) {
            if (event.target == modal) {
          modal.style.display = "none";
        }
      }

Answer 1

You try to manipulate element with id="myModal" using your JavaScript. But I haven't found that element in your modal content. There's should be something like:

span.onclick = function() {
 $(this).closest('.modal-content').css('display', 'none');
}