我顯示一個用戶列表，并在每個用戶的末尾添加 2 個按鈕，一個用于編輯，另一個用于刪除用戶，我的大問題是只有列表中第一個元素的按鈕起作用。此代碼顯示我的列表<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>這是我的 JavaScript 代碼const formEditDel = document.querySelector('form#ed');const userDel = formEditDel.querySelectorAll('[class="buttonDelete"]')const userEdit = formEditDel.querySelectorAll('[class="buttonEdit"]')eventListeners();function eventListeners(event) {    userDel.forEach(button => {        button.addEventListener('click', markDeleted);    });    userEdit.forEach(button => {        button.addEventListener('click', userEdited);    });}我真的不知道該怎么辦，所以任何建議將不勝感激。