Javascript 当循环不工作时，单击生成的按钮

我有一个无序的列表，接收动态数据mysql数据库，列表返回一些youtube链接，标题缩略图和每个视频的完整视图，我制作了一个简单的脚本，使用css display none显示和隐藏div，显示这个div，它将接收链接，它将显示视频，我的问题是，只有第一个播放按钮隐藏并显示div，其他按钮在中动态创建，但不工作

这是我的HTML和PHP通过while接收数据库

<div id="player"></div>
<div class="divvideos">
    <ul>
        <?php while($videolist = $resultvideos->fetch_array()){ ?>
        <li class="listdivvideos">
            <button class="btplay" id="btplay"></button>
            <img src="images/datahoraicon.png" class="imgdatahora">
            <ul>
                <li><img src="http://i1.ytimg.com/vi/<?php echo $videolist['miniatura'] ?>/default.jpg"></li>
            </ul>
        </li>
        <?php } ?>
    </ul>
</div>

/default.jpg“>

下面是显示和隐藏div播放器的简单脚本

<script>
    $("#btplay").click(function () {
        if($("#player").css("display") == "none")
            $("#player").css("display","block");
        else
            $("#player").css("display","none");
    });
</script>

$（“#btplay”）。单击（函数（）{
if（$（“#player”）.css（“显示”）=“无”）
$（“#播放器”）.css（“显示”、“块”）；
其他的
$（“#播放器”）.css（“显示”、“无”）；
});

---

我的代码通过单击ID为btplay的按钮来正常工作。它隐藏并显示ID为player的div。我唯一的问题是，该按钮创建了多次，因为它是在返回While但只有primero按钮隐藏并显示div的主行中创建的。其他按钮不起作用ng>ID应该是唯一的（如上所述）。将它们删除或添加计数器（最好将它们删除）

应该会成功

提普：你可以代替我

 <?php while($videolist = $resultvideos->fetch_array()){ ?>
      //...
 <?php } ?>

//...

与

//...

及

与

---

我认为这会使它更具可读性，但它只是一个提示。

id

应该是唯一的。如果您使用相同的id创建多个元素，您希望它选择哪一个？试试

$（'.btnplay'）。在（'click'，（）=>{}）

上，您可以用

\player

显示部分代码吗？如果您使用jquery，您也可以使用$（“\player”）.toggle（）来显示/隐藏它们，而不是if块。@atmd它像手套一样工作，我真的没有注意用ID而不是类创建的。@Boris Savic玩家代码还没有准备好，但当你准备好后，你可以在这里发布问题答案，让我选择正确的答案。

 <?php while($videolist = $resultvideos->fetch_array()){ ?>
      //...
 <?php } ?>

 <?php while($videolist = $resultvideos->fetch_array()): ?>
      //...
 <?php endwile; ?>

 <?php echo $videolist['miniatura'] ?>

 <?= $videolist['miniatura']; ?>