如何使用php中的while循环显示从数据库中获取的多个图像中的特定点击图像，以及用于显示的javascript？

Question

我试图在php中使用while循环从数据库中获取一个特定的点击图像（单击html页面中的图像时的完整弹出屏幕），但是由于它在while循环中，我无法显示该特定图像。我得到的结果是，当我点击第一张图片时，我可以按照我想要的方式显示第一张图片，但是我无法显示图像的其余部分，我猜是我在img标签中提供的ID只能由第一张图片。因为它在一个while循环中我认为可以给id相同但我错了。我该如何解决这个问题？我尝试在while循环中增加$ i变量，但我无法在javascript中实现$ i。或者，还有更好的方法？继承我的代码。

    <!DOCTYPE html>
    <html>
    <head>
<title>Home</title>
<link rel = "stylesheet" type = "text/css" href = "accounts.css">
    </head>
    <body>
    <?php 
$servername = 'localhost';
$user = 'root';
$passwords = '';
$dbname = 'project';

$conn = new mysqli($servername, $user, $passwords, $dbname);

if($conn->connect_error)

    die("Could not connect... ".$conn->connect_error);


$sql = "SELECT photo_url FROM photo WHERE username = '$username'";
$result = $conn->query($sql);
if($result->num_rows > 0)

    while($row = $result->fetch_assoc())
    
        echo "<span id = 'photos'>";
            echo "<img id = 'myProfile1' src = '".$row['photo_url']."' alt = 'photo' width = 190px' height = '200px' style = 'border: 1px solid #aaaaaa;'>";
        echo "</span>";
        echo "<div id = 'popUp1' class = 'pop'>";
            echo "<span class = 'close1'>&times;</span>";
            echo "<img class = 'pop-content' id = 'img02'>";
        echo "</div>";
    

else

    echo "<p>You haven't uploaded any photo.</p>";

$conn->close();
    ?>
    <script>
var pop1 = document.getElementById('popUp1');
var img1 = document.getElementById('myProfile1');
var popImg1 = document.getElementById('img02');
img1.onclick = function()

    pop1.style.display = 'block';
    popImg1.src = this.src;

var span1 = document.getElementsByClassName('close1')[0];
span1.onclick = function()

    pop1.style.display = 'none';

    </script>
    </body>
    </html>

先感谢您。