Javascript 在放大弹出窗口中显示动态内容

我试图做一个动态内容放大弹出窗口

这是我当前的代码

if（$queryResult>0）{
while（$row=mysqli\u fetch\u assoc（$result））{
回声“
我在你面前
";
}
}

这是javascript

$（“#posterLink1，#posterLink2，#posterLink3”）
.放大弹出窗口({
类型：'inline'，
midClick:true//允许在鼠标中键单击时打开弹出窗口。如果在href中未提供替代源，请始终将其设置为true。
}) 

由于我使用的放大弹出窗口仅根据

id

标记和JavaScript中给定的

id

打开内容，如果我有不同的内容，则

id

仍然保持不变，按钮只会反复打开相同的内容，因为

id

是相同的。因为我获取的内容来自数据库，所以我不能重复代码，只能像在静态页面中一样更改

id

---

我做错了什么

问题在于循环中没有计数器。另外，调用

放大弹出窗口

不需要

id

，而是使用

类

进行动态调用

PHP:

if ($queryResult > 0) {
    $ctr = 1;
    while ($row = mysqli_fetch_assoc($result)) {
        echo "<div class='hvrbox'>
            <img src='image/".$row['mImage']."' alt='' class='hvrbox-layer_bottom' />
            <div class='hvrbox-layer_top'>
                <a href='#posterVid".$ctr."' class='posterbtn1'>Play Trailer</a>
                <div id='posterVid".$ctr."' class='mfp-hide' style='max-width: 75%; margin: 0 auto;'>
                    <iframe width='853' height='480' src='".$row['mLink']."' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
                </div>
                <a class='posterbtn2' href='movie-detail.php?name=".$row['mName']."'>Movie Details</a>
                <div class='hvrbox-text'>Me Before You</div>
            </div>
        </div>";
        $ctr++;
    }
}

$('.posterbtn1')
    .magnificPopup({
        type:'inline',
        midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
    }) 

---

没问题，很高兴我能帮忙。