I could not pass php row id through modal (BS v5.3)

I would like to pass php row id from while loop through modal in order to create edit modal form.

Here is my modal toggle

<a data-bs-toggle="modal" data-bs-target="#modaledit" 
data-bs-whatever="?id=<?=$row['staff_id'];?>">
<i class="fa-solid fa-pencil fa-lg" style="color: #fec700;"></i></a>

As you can see, I would like value in

data-bs-whatever="?id=<?=$row['staff_id'];?>"

which is my row id to go in sql and search data on that row ($coverid = row id) by

if (isset($coverid)) {
    $sqlu = " select * from tb_staff";
    $sqlu .= " where";
    $sqlu .= " staff_id='$coverid'";
    $resultu = $cls_conn->select_base($sqlu);
    while ($rowu = mysqli_fetch_array($resultu)) {
        $staff_name = $rowu['staff_name'];
        $staff_lastname = $rowu['staff_lastname'];
    }
}
?>

then my edit modal could show the right value in that row

<div class="modal fade" id="modaledit" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog model-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">Edit Form</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="modal_edit" method="POST">

                       <div class="row g-2">

                        <div class="col-sm-6">
                            <div class="form-floating">
                                <input id="staff_name" name="staff_name" type="text" class="form-control" placeholder="placeholder" required="required" value="<?= $staff_name; ?>">
                                <label for="staff_name">Name</label>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-floating">
                                <input id="staff_lastname" name="staff_lastname" type="text" class="form-control" placeholder="placeholder" required="required" value="<?= $staff_lastname; ?>">
                                <label for="staff_lastname">Lastname</label>
                            </div>
                        </div>

                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" name="editmodal" class="btn btn-warning" form="modal_edit">Edit</button>
            </div>
        </div>
    </div>
</div>

Edited : My unworked Javascript

const modaledit = document.getElementById('modaledit')
if (modaledit) {
  modaledit.addEventListener('show.bs.modal', event => {
  
    const button = event.relatedTarget
 
    var coverid = button.getAttribute('data-bs-whatever')

I think my Javascript is my issue, how can i fix it?

I just want my edit-modal able to show data from the right row.