How to allow cell on data table for edit and close after edit ?

Question

I work on asp.net razor page model . i face issue i can't edit datatable on same page by edit cell without redirect to another page

I need to edit cell on same page 

my code details as below :

public class UserModel
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    // add other user properties as needed
}

public class IndexModel : PageModel
{
    private readonly YourDbContext _dbContext; // replace with your DbContext class

    public IndexModel(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public List<UserModel> Users { get; set; }

    public void OnPost(string userId)
    {
        Users = _dbContext.Users
            .Where(u => u.Id == userId)
            .Select(u => new UserModel
            {
                Id = u.Id,
                Name = u.Name,
                Email = u.Email
                // map other user properties as needed
            })
            .ToList();
    }
}

I need to edit data on table by edit every cell on rows 

@if (Users != null && Users.Count > 0)
{
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <!-- add other user property headers as needed -->
            </tr>
        </thead>
        <tbody>
            @foreach (var user in Users)
            {
                <tr>
                    <td>@user.Id</td>
                    <td>@user.Name</td>
                    <td>@user.Email</td>
                   <td>
          <button class="btn btn-primary edit-btn" data-id="@user.Id">Edit</button>
        </td>
                </tr>
            }
        </tbody>
    </table>
}

so How to allow edit cell   by enabled for edit then close it after edit 

this is image for what i need to do