Here's my code and it worked well, could you pls help check it?

<table>
    <tr class="text-nowrap">
        <td>user1</td>
        <td>Admin</td>
        <td>
            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#RoleModal" data-id="user1" data-role="admin">
                open modal
            </button>
        </td>
    </tr>
    <tr class="text-nowrap">
        <td>user2</td>
        <td>Guest</td>
        <td>
            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#RoleModal" data-id="user2" data-role="guest">
                open modal
            </button>
        </td>
    </tr>
</table>

<div class="modal fade" id="RoleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal For Role</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-5">
                        <label class="col-form-label">Role</label>
                    </div>
                    <div class="col-md-7">
                        <select asp-for="Role" class="form-select" required>
                            <option value="admin">admin</option>
                            <option value="guest">guest</option>
                        </select>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

@section Scripts {
    <script>
        $('#RoleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var userRole = button.data('role');
            console.info(button);
            console.info(userRole);
            $('#Role').val(userRole);
        });

    </script>
}