单击一个 div（类名为 table id）显示隐藏的 div（类名与 table id 相同）

Question

所以我的数据库有一个包含一列的表id。我的index.php页面回显了id各个 div 中的所有数据库行。点击的按钮元素的类名是："mainbut<?php echo $id->rqvid; ?>"而隐藏的 div 元素的类名是："subdiv<?php echo $id->rqvid; ?>"我想要实现的mainbut<?php echo $id->rqvid; ?>是点击时，然后subdiv<?php echo $id->rqvid; ?>显示。简单来说 - 当一个按钮（带有 row id）被点击时，就会显示一个隐藏的 div（带有相同的 row id）。我想要实现的视觉表示：注意：四个1's 代表id来自数据库的列的行----------------| 1 [mainbut1] | <-- when [mainbut1] is clicked on----------------| 1 (subdiv1)  | <-- then div of classname "subdiv1" shows----------------例如，我的表中有 3 行 ID 编号为 1 到 3。但是当我单击任何按钮时，它不会显示相同 id的隐藏 div 元素。相反，它只显示最后一行的id一个隐藏 div 元素。所以这是我得到的结果：----------------| 1 [mainbut1] | <-- when [mainbut1] is clicked on...----------------                 <-- (div "subdiv1" does not show. Why?)----------------| 2 [mainbut2] | --------------------------------| 3 [mainbut3] |----------------| 3 (subdiv3)  | <-- But instead div "subdiv3" shows.----------------我希望能够单击任何按钮，并且仅显示具有相同 id 的相应隐藏 div。我认为我的 jquery 代码中肯定缺少一些东西。有人可以帮我让它正常工作吗？这是我目前的代码：<?php foreach($ids as $id): ?><div>    <?php echo $id->rqvid; ?>    <button class="mainbut<?php echo $id->rqvid; ?>">click</button></div><div class="subdiv<?php echo $id->rqvid; ?>">    <?php echo $id->rqvid; ?> sub-box</div><script>var i = '<?php echo $id->rqvid; ?>';$(".mainbut"+i).on('click', function() {    $(".subdiv"+i).css("display","block");});</script><?php endforeach; ?>