Javascript 如何使用document.querySelectorAll（）使函数在整个表中工作

我目前正在制作一个警告页面，告诉用户如果他们收到未确认的错误发送给他们。在我的项目中，我有一行稍后将从数据库中收集的信息。我有两个未确认的按钮和注释，单击未确认的按钮将变为知识，注释按钮将显示一个弹出窗口，用户可以添加注释。当前，当您单击这些按钮时，只有第一行起作用，但其余按钮不起作用

document.getElementById（'seen'）.addEventListener（'click'，函数（事件）{
this.textContent=this.classList.toggle（'hack'）？
“确认”：
“未确认”
}，假）；
$（文档）.ready（函数（）{
$（'#myTable'）。数据表({
回答：是的，
“页面长度”：4
});
});
const viewBtn=document.querySelector（“.view model”），
popup=document.querySelector（“.popup”），
关闭=弹出式.querySelector（“.close”），
field=popup.querySelector（“.field”），
输入=字段。查询选择器（“输入”），
复制=字段。查询选择器（“按钮”）；
viewBtn.onclick=（）=>{
popup.classList.toggle（“显示”）；
}
close.onclick=（）=>{
viewBtn.click（）；
}

正文{
背景图片：url（“BackgroundAxure.png”）；
背景色：#f2f0ed；
位置：自动；
}
表th：第n个孩子（3），
运输署：第n名儿童（3）{
显示：无；
}
身体{
左侧填充：20px；
右边填充：20px；
}
#标志{
边缘顶部：10px；
位置：固定；
宽度：300px；
高度：46px；
显示器：flex；
}
#分类{
身高：20；
宽度：40；
}
#h1{
文本对齐：右对齐；
颜色：黑色；
字体大小：39px；
}
.按钮{
背景颜色：绿色；
边界：无；
边界半径：4px；
颜色：白色；
填充：2px32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：14px；
}
table.dataTable{
宽度：100%；
保证金：0自动；
明确：两者皆有；
边界塌陷：分离；
边界间距：0；
}
#看见{
宽度：160px；
高度：25px；
背景色：#E16A6A；
边界：无；
边界半径：4px；
颜色：黑色；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：14px；
}
#哈克先生{
背景颜色：绿色；
颜色：黑色；
}
table.dataTable thead th，
table.dataTable tfoot th{
字体大小：粗体；
}
table.dataTable thead th，
table.dataTable thead td{
边框底部：1px实心#111；
}
table.dataTable.display tbody tr.odd>.sorting_1，
table.dataTable.order-column.stripe tbody tr.odd>.sorting\u 1{
背景色：#f1f1；
}
table.dataTable.no-footer{
边框底部：1px实心#111；
}
table.dataTable tbody th.dt-body-left，
table.dataTable tbody td.dt-body-left{
文本对齐：左对齐；
}
table.dataTable tbody th.dt-body-center，
table.dataTable tbody td.dt-body-center{
文本对齐：居中；
}
table.dataTable tbody th.dt-body-right，
table.dataTable tbody td.dt-body-right{
文本对齐：右对齐；
}
表.dataTable tbody th.dt-body-justify，
table.dataTable tbody td.dt-body-justify{
文本对齐：对齐；
}
表2.2.1.1.2.2.2.2.2.2.2.1.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2，
表4.2.1.2.2.2.2.2.1.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2.2{
空白：nowrap；
}
/*搜索框*/
.dataTables\u包装器.dataTables\u长度{
浮动：左
}
.dataTables\u包装器.dataTables\u过滤器{
浮动：对；
文本对齐：右对齐；
}
.dataTables\u包装器.dataTables\u过滤器输入{
左边距：0.5em；
}
.dataTables\u包装器.dataTables\u信息{
明确：两者皆有；
浮动：左；
垫面：0.755em；
}
.dataTables_包装。dataTables_包装{
浮动：对；
文本对齐：右对齐；
垫面：0.25em；
}
.dataTables_包装器.dataTables_分页.分页按钮{
框大小：边框框；
显示：内联块；
最小宽度：1.5em；
填充物：0.5em 1em；
左边距：2倍；
文本对齐：居中；
文字装饰：无！重要；
光标：指针；
*光标：手；
颜色：#333！重要；
边框：1px实心透明；
}
.dataTables_wrapper.dataTables_paginate.paginate_button.current，
.dataTables_包装。dataTables_分页。分页按钮。当前：悬停{
颜色：#333！重要；
边框：1px实心#cacaca；
背景色：#fff；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，#fff）、颜色停止（100%，#DCDC））；
背景：-webkit线性梯度（顶部，#fff 0%，#DCDC 100%）；
背景：-moz线性梯度（顶部，#fff 0%，#DCDC 100%）；
背景：-ms线性梯度（顶部，fff 0%，DCDC 100%）；
背景：-o-线性梯度（顶部，#fff 0%，#DCDC 100%）；
背景：线性梯度（至底部，#fff 0%，#DCDC 100%）
}
.dataTables\u包装器.dataTables\u滚动div.dataTables\u滚动体{
*页边顶部：-1px；
-webkit溢出滚动：触摸
}
.dataTables\u包装器.dataTables\u滚动div.dataTables\u滚动体th>div.dataTables\u大小调整，
.dataTables\u包装器.dataTables\u滚动div.dataTables\u滚动体td>div.dataTables\u大小调整{
身高：0；
溢出：隐藏；
边距：0！重要；
填充：0！重要
}
.dataTables\u wrapper.no-footer.dataTables\u scrollBody{
边框底部：1px实心#111
}
.dataTables\u wrapper.no-footer div.dataTables\u滚动头表，
.dataTables\u wrapper.no-footer div.dataTables\u scrollBody表{
边框底部：无
}
.dataTables\u包装器：之后{
可见性：隐藏；
显示：块；
内容：“；
明确：两者皆有；
身高：0
}
@媒体屏幕和屏幕（最大宽度：767px）{
.dataTables\u包装器.dataTables\u信息，
.dataTables_包装。dataTables_包装{
浮动：无；
文本对齐：居中
}
.dataTables_包装。dataTables_包装{
边缘顶部：0.5em
}
}
@媒体屏幕和屏幕（最大宽度：640像素）{
.dataTables\u包装器.dataTables\u长度，
.dataTables\u包装器.dataTables\u过滤器{
浮动：无；
文本对齐：居中
}
.dataTables\u包装器.dataTables\u过滤器{
边缘顶部：0.5em
}
}
.弹出窗口{
位置：绝对位置；
左：50%；
}
钮扣{
大纲：无；
光标：指针；
字号：500；
边界半径：4px；
边框：2倍实心透明；
过渡：背景0.1s线性，边框颜色0.1s线性，颜色