Sending request from IHubContext<MainHub> to the client changing only 1 value from a table

Question

i have been working with SignalR + JS since a while and i decide to create full RTW APP. I am passing values from outside of the hub but i can actually change only first value in a @foreach loop. Today i was walking around this for few hours and found nothing. The thing is: Pass value for specific ID in a table and change its value.

This is my razor page table:

<div class="listofagencies">
    <div class="card">
        <div class="card-header"><center><b>LiveCad</b></center></div>
        <div class="card-body">
            <p class="card-text">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Id</th>
                            <th scope="col">Jednostka </th>
                            <th scope="col">Miasto </th>
                            <th scope="col">Status </th>
                        </tr>
        </div> </thead>
        <tbody>
            @foreach (var agency in Model.Agencies)
            {
                <tr>
                    <td id=@agency.Id>@agency.Id</td>
                    <td>@agency.Name</td>
                    <td>@agency.City</td>
                    <td><span id="teststat">test</span></td>
                </tr>
            }
        </tbody>
        </table>
        </p>
    </div>
</div>

This is my Hub class:

public class MainHub : Hub<IMainHub>
    {
        private readonly MainContext context;

        public MainHub(MainContext context)
        {
            this.context = context;
        }
        public static int ViewCount { get; set; } = 0;
        public async override Task OnConnectedAsync()
        {
            ViewCount++;
            await Clients.All.ViewCountUpdate(ViewCount);
            await base.OnConnectedAsync();
        }
        public async override Task OnDisconnectedAsync(Exception? exception)
        {
            ViewCount--;
            await Clients.All.ViewCountUpdate(ViewCount);
            await base.OnDisconnectedAsync(exception);
        }
        public async Task UpdateState(int id, string agencyState)
        {
            await Clients.All.ChangeAgencyState(id,agencyState);
        }
    }

This is my IMainHub interface:

    public interface IMainHub
{
    Task ChangeAgencyState(int id, string state);
    Task ChangeReportState(int id, string state);
    Task ViewCountUpdate(int viewCount);
}

This is my Razor Page which i use to send request

    public class DataManipulationModel : PageModel
{
    private readonly IHubContext<MainHub> context;
    

    public DataManipulationModel(IHubContext<MainHub> _context)
    {
        context = _context;
      
    }
    public async Task OnPostStart()
    {
       
            await context.Clients.All.SendAsync("changeAgencyState","Gotowy");
           
    }
}

And this is listener in JS client:

    connection.on("changeAgencyState", (value) => {
    st.innerText = value.toString();
});

I have been working with JS for a thousand different tries, but still it is updating my first record in a table instead of upgrading specific one ID.

##UPDATE

I'v created manually some records, and here is 100% problem with passing value of specific row.

Answer 1

i fix it by myself. It works now.

The solution is - get JavaScript fundamentals :D

and here is event

connection.on("changeAgencyState", (id, value) => {
    console.log("entry");
    document.getElementById(id + "-stat").innerText = value;
});

and changed html form

    @foreach (var agency in Model.Agencies)
    {
       <tr class="align-middle">
            <td>@agency.Name</td>
            <td>@agency.City</td>
            <td><span id="@agency.Id-stat">test</span></td>
            </tr>
         
    }

It is actually doing the job.