触发循环产生的多个弹出窗口

我想在从数据库中获取记录的循环中显示警报消息。问题是，弹出窗口仅适用于一项，而另一项则不显示任何弹出窗口。

怎么了

PHP：

$query = "SELECT * FROM discount
          WHERE consecutivedays <=  DATEDIFF('$date2','$date1')
                AND idbeach = '$idbeach'
          ORDER BY consecutivedays desc
          LIMIT 1";

$results = mysqli_query($conn, $query);

while($row = $results->fetch_assoc()){

    $reserved= $row['discountperc'];

    if ($reserved=="yes") {

        $getbooking = new WA_MySQLi_RS("getbooking",$sis,1);

        $getbooking->setQuery("SELECT `name`,
                                      CONCAT(`datein`,' - ',`dateout`) AS dates,
                                      price,discount,comment
                               FROM booking
                               where idseatbeach = '$idseatbeach'
                               order by datein limit 1");

        $getbooking->execute();
        $name=$getbooking->getColumnVal("name");
        $dates=$getbooking->getColumnVal("dates");
        $price=$getbooking->getColumnVal("price");  
        $discount=$getbooking->getColumnVal("discount");    
        $comment=$getbooking->getColumnVal("comment");  
        $message = "Booked by: $name\n
                    Date range: $dates\n
                    Price :$price\n
                    Discount :$discount\n
                    Comment :$comment";

        ?>
        <div class="item" >
            <div class="popup" onclick="myFunction()">
                <span class="popuptext" id="myPopup"><?php echo $message;?></span>
                <img src="images/umbrelladisactive.png" width="35" height="35" 
                    alt="<?php echo $nameseat; ?> "/>
                <p style="margin-right: 0px; color: blue;">Currently Booked</p>
            </div>
        </div>
       <?php

   }
}

JavaScript：

var stile = "top=10, left=10, width=450, height=350,
             status=no, menubar=no, toolbar=no scrollbars=no";

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

CSS：

.item {
  width: 100px;
  text-align: center;
  display: block;
  background-color: transparent;
  border: 1px solid transparent;
  margin-right: 10px;
  margin-bottom: 1px;
  float: left;
}

#index-gallery {
  width: 50px;
}


/* Popup container */

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}


/* The actual popup (appears on top) */

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}


/* Popup arrow */

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


/* Toggle this class when clicking on the popup container (hide and show the popup) */

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}


/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}