foreach循环生成多弹窗CSS冲突，点击仅弹出首个弹窗如何解决？

核心原因 #

页面内ID必须唯一，你循环生成的所有弹窗都使用了固定的id="show"，<label>的for属性只会匹配页面内第一个对应ID的元素，因此所有按钮点击都会触发第一个弹窗的状态变化。

改造方案 #

1. 循环生成唯一ID #

在foreach输出弹窗代码时，用当前课程的唯一标识（如课程ID、循环索引序号）拼接生成唯一ID，替换固定的show：
以下为PHP循环示例，其他开发语言逻辑一致：

<?php foreach ($courseList as $index => $course): ?>
<input type="checkbox" id="show-<?= $course['id'] ?>" />
<label for="show-<?= $course['id'] ?>" class="show-btn"> Join Meeting </label>

<div class="container-attendence">
  <label for="show-<?= $course['id'] ?>" class="close-btn fas fa-times" title="close"></label>
  <div class="text">Attendence Detail</div>
</div>
<?php endforeach; ?>

2. 调整通用CSS规则 #

不需要为每个弹窗单独生成样式，仅需修改原CSS中绑定固定#show的两段规则，使用属性选择器匹配所有前缀为show-的复选框即可：

input[id^="show-"]:checked ~ .show-btn{
  display: none;
}
input[id^="show-"]:checked ~ .container-attendence{
  display: block;
}

其余CSS代码无需任何修改，可直接复用。

改造完成后每个弹窗的触发、关闭逻辑仅和自身对应的复选框绑定，完全不受课程数量变化的影响，不会再出现弹窗互相干扰的问题。

内容的提问来源于stack exchange，提问作者Ng Hann Pin