Как заставить несколько модалов отображаться в цикле while?

php / html:

<?php include 'connect.php';
$sql = "SELECT * FROM products WHERE featured = 1";
$featured = mysqli_query($conn,$sql);
?>

<?php while ($product = mysqli_fetch_assoc($featured)): ?>
<div class = "products">
<a  class = "myBtn"><img src = "<?= $product['image'];?>" height = "300" 
width = "275"></a>
<a href = "#" class = "myBtn"> <p><?=$product['title'];?></p></a><br>
<p>Usual Price: £<s><?= $product['list_price'];?></s></p>
<p>Sale Price: £<?= $product['price'];?></p>

</div>

<!-- Trigger/Open The Modal -->
<button id = "myBtn">Open Modal</button>

<!-- The Modal -->
<div id = "myModal" class = "modal">

<!-- Modal content -->
<div class = "modal-content">
<span class = "close">&times;</span>
<p>Some text in the Modal..</p>
</div>

</div>
<?php endwhile ?>

css:

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }

 /* Modal Content/Box */
 .modal-content {
   background-color: #fefefe;
   margin: 15% auto; /* 15% from the top and centered */
   padding: 20px;
   border: 1px solid #888;
   width: 80%; /* Could be more or less, depending on screen size */
 }
 /* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
   }

 .close:hover,
 .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
    }

javascript:

// 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 on 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) {

вопросы: 1. модальный фон вообще не отображается

2.Модальное содержимое по умолчанию отображается блоком при открытии страницы.

3. на кнопке нет стиля

4. модальные окна не открываются при нажатии (кроме первого)

Модальное окно просто скопировано из W3schools, поэтому я ожидаю, что код правильный. Что я здесь делаю не так?

Благодарю.