单击一个 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; ?>