Javascript JS函数addEventListener只对列表的第一个元素起作用

我显示一个用户列表，并在每个用户的末尾添加两个按钮，一个用于编辑，另一个用于删除用户，我的大问题是，只有列表中第一个元素的按钮起作用

此代码显示我的列表

<tbody>
            <?php for( $i = 0; $i < count($users->datos); $i++ ): ?>
                <tr>
                    <td style="padding: 0 20px;"><?php echo $users->datos[$i]["email"  ]; ?></td>
                    <td style="padding: 0 20px;"><?php echo $users->datos[$i]["paterno"]; ?></td>
                    <td style="padding: 0 20px;"><?php echo $users->datos[$i]["materno"]; ?></td>
                    <td style="padding: 0 20px;"><?php echo $users->datos[$i]["nombre" ]; ?></td>
                    <td style="padding: 0 20px;">
                        <?php
                        echo preg_replace(PHONE_NUMBER, "($1) $2-$3", $users->datos[$i]["movil"]);
                        ?>
                    </td>
                    
                    <td id="botones">
                        <form id="ed" method="POST">
                            <input  type="hidden" id="token" name="token" value="<?php echo $users->datos[$i]["tokenA"]; ?>">
                            
                            <button type="submit" id="<?php echo $users->datos[$i]["id"]; ?>" class="buttonDelete"><i class="fas fa-trash-alt"></i></button>
                            <button type="submit" id="<?php echo $users->datos[$i]["id"]; ?>" class="buttonEdit"  ><i class="fas fa-edit"     ></i></button>
                        </form>
                    </td>
                </tr>
            <?php endfor; ?>
        </tbody>

---

我真的不知道该怎么办，所以任何建议都将不胜感激。

因为每一行都包含一个单独的表单，所以使用id选择它们只会选择第一个表单

所以，你可以替换这个

const userDel = formEditDel.querySelectorAll('[class="buttonDelete"]')
const userEdit = formEditDel.querySelectorAll('[class="buttonEdit"]')

<form id="ed" method="POST"> ... </form>

用这个

const userDel = document.querySelectorAll('[class="buttonDelete"]')
const userEdit = document.querySelectorAll('[class="buttonEdit"]')

<form class="ed" method="POST"> ... </form>

或者你可以替换这个

const userDel = formEditDel.querySelectorAll('[class="buttonDelete"]')
const userEdit = formEditDel.querySelectorAll('[class="buttonEdit"]')

<form id="ed" method="POST"> ... </form>

---

多亏了@Taplar和@imvain2，我才能得到这个问题的答案并理解它是如何工作的。谢谢你们

这是最后的代码

const userDel  = document.querySelectorAll('.buttonDelete');
const userEdit = document.querySelectorAll('.buttonEdit');

eventListeners();

function eventListeners(event) {
    userDel.forEach(buttonDel => {
        buttonDel.addEventListener('click', markDeleted);
    });

    userEdit.forEach(buttonEdit => {
        buttonEdit.addEventListener('click', userEdited);
    });
}

---

我会尝试发布

markDeleted

和

userEdited

的代码。但是，有一个观察结果是ID必须是唯一的，不能是数字。但是，部分问题可能是您在重复ID。每个页面的ID都应该是唯一的。如果两种方法都有效，您就不会在S.O.

文档中遇到问题。querySelector（'form#ed'）

只会在页面上找到第一个表单。它不会在页面上找到任何其他具有相同id的表单，“这真的没关系，因为这两个函数都可以工作”，著名的最后一个词也可以作为旁注；不要执行

querySelectorAll（'[class=“buttonDelete”]'）

。您正在使用属性选择器执行类查找，这不会像浏览器使用类选择器那样获得性能提升。相反，使用属性选择器，可以让浏览器执行DOM扫描，因为任何元素都可以拥有该类。使用

querySelectorAll（'.buttonDelete'）

将允许浏览器使用其对所有元素的任何内部缓存，以更高效地查找具有该类的元素。