JS function addEventListener just works on the first element of my list

I display a user list and at the end of each user I add 2 buttons, one for edit and the other to delete the user, my big problem is that only the buttons of my first element of my list work.

This code displays my list

<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>

And this is my javascript code

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);
    });

}

I really don’t know what to do, so any suggestion will be appreciated.