仅首行按钮可打开模态框 后续行同类按钮失效问题咨询

id属性在HTML文档中必须全局唯一，你所有行的「Edit Track」按钮都重复使用了id="trackBtn"，document.getElementById()只会返回匹配到的第一个元素，所以只有第一行的按钮绑定了点击事件，后续行的按钮没有事件触发逻辑，自然无法唤起模态框。

1. 修改HTML部分：删除所有「Edit Track」按钮上重复的id="trackBtn"属性，给这类按钮新增一个统一的类名用于选择，比如edit-track-btn，修改后按钮代码如下：

<button class="yardDropBtnCt edit-track-btn">Edit Track</button>

需把所有行的该按钮都按上述规则调整。

2. 修改JavaScript部分：选中所有带统一类名的按钮，遍历给每个按钮绑定打开模态框的事件，修改后的JS代码如下：

//MODAL BAN
var modalt = document.getElementById("trackModal");

// 选中所有Edit Track按钮
var editBtns = document.querySelectorAll(".edit-track-btn");

// 获取关闭模态框的叉号元素
var spantrack = document.getElementsByClassName("close")[0];

// 遍历给每个按钮绑定打开模态框的事件
editBtns.forEach(function(btn) {
  btn.onclick = function() {
    modalt.style.display = "block";
  }
})

// 点击叉号关闭模态框
spantrack.onclick = function() {
  modalt.style.display = "none";
}

// 点击模态框外部区域关闭模态框
window.onclick = function(event) {
  if (event.target == modalt) {
    modalt.style.display = "none";
  }
}

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