使用JavaScript控制带PHP动态ID的DIV显隐仅最后一行生效如何解决

问题根源 #

• 所有行的回复区域DIV都使用了相同的固定ID third，HTML规范要求ID必须全局唯一，getElementById 永远只会匹配到第一个符合的元素，加上循环输出代码时变量会被反复覆盖，最终只会保留最后一行的元素引用，所以点击任何按钮都只会触发最后一行的显隐。
• 按钮的动态ID没有和对应DIV做关联，事件绑定逻辑存在变量覆盖问题。

最优解决方案（无需动态ID，代码更简洁） #

不需要给按钮和DIV设置动态ID，通过DOM相邻元素查找即可实现每行独立控制，避免ID重复和变量覆盖问题。

1. 修改HTML代码 #

给按钮加统一类名reply-btn，给回复区域DIV加统一类名reply-form，去掉重复的固定ID：

<a class='btn reply-btn' role='button' style='font-size:11px;color:#808080;' > Reply Comment</a>
<div class='reply-form' style='display:none;'>Display textfield here</div>

2. 替换原有JS代码 #

只需要在页面底部放一次这段JS即可，不需要循环输出JS片段：

// 选中所有回复按钮
const replyBtns = document.querySelectorAll('.reply-btn');
// 批量绑定点击事件
replyBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 查找当前点击按钮相邻的回复区域DIV
    const targetDiv = this.nextElementSibling;
    // 切换显隐状态
    targetDiv.style.display = targetDiv.style.display !== 'none' ? 'none' : 'block';
  })
})

备选方案（坚持用动态ID的实现） #

如果一定要用ID做关联，需要保证按钮和对应DIV的ID一一对应不重复：

HTML代码修改 #

<a class='btn' id="btn_<?php echo $author_id_4comm; ?>" role='button' style='font-size:11px;color:#808080;' > Reply Comment</a>
<div id="reply_<?php echo $author_id_4comm; ?>" style='display:none;'>Display textfield here</div>

JS代码修改 #

不要循环输出全局变量的JS片段，用事件委托实现：

document.addEventListener('click', function(e) {
  // 判断点击的是回复按钮
  if (e.target.classList.contains('btn') && e.target.id.startsWith('btn_')) {
    const replyId = e.target.id.replace('btn_', 'reply_');
    const targetDiv = document.getElementById(replyId);
    targetDiv.style.display = targetDiv.style.display !== 'none' ? 'none' : 'block';
  }
})

内容的提问来源于stack exchange，提问作者Chima