How can I change with onclick event of a <td>the color of the td? The critical point is that the td elements are generated dynamically with code

In my Blazor server app, I am reading the CNC Files of a remote machine and listing them in the table's rows. So far everything is OK.

When the user clicks on one TD element, the content of the CNC file will be shown on the screen in another table(This part I have not shown because it is not related to my problem)

I want that the last choosen CNC file (last clicked ) should be highlighted (font=red). That means each time when the user selects another CNC-File, just the related should be higlighted all others should be in default color (black).

If I would have a static table I would use the a:focus. But my problem is that my td's will be generated dynamically. And I have to apply the a:focus function for just one td (that was clicked). How can I do that? I have tried to call a function in the style of the td style="@Style_CNC_File()" but the colors that I define in the function are applied to all of the td's.

Here is my code:

<table >

        <tr>
            <td>CNC Files</td>

        </tr>
        @{ if (Deltalogic.Return_Read_CNC_File == 0 && Deltalogic.Selected_CNC_File_Path_Type == "file")
            {
                for (var i = 0; i < Deltalogic.CNC_File_Array_lenght_dir - 1; i++)
                {
                    var arg0 = "abc";
                    var arg1 = "def";
                    var arg2 = "ghi";                        
                    <tr >
                        <td style="@Style_CNC_File()" @onclick='@(e => Read_CNC_Files(arg0,arg1,arg2))'>/@Deltalogic.CNC_File_Out_Array_dir[i]</td>

                    </tr>
                }
            }
        }

    </table>

In my razor.cs file:

    public string Style_CNC_File()
    {
        if (var_clicked == true)
        {
            return "color:#FF0000";
        }
        else
        {
            return "color:#000000";
        }


    }       

Maybe you can set an id to your td and store the selected id :

    <tr>
        <td>CNC Files</td>

    </tr>
    @{ if (Deltalogic.Return_Read_CNC_File == 0 && Deltalogic.Selected_CNC_File_Path_Type == "file")
        {
            for (var i = 0; i < Deltalogic.CNC_File_Array_lenght_dir - 1; i++)
            {
                var arg0 = "abc";
                var arg1 = "def";
                var arg2 = "ghi";  
                <tr >
                    <td @onclick='@(e => HandleClick(i, arg0,arg1,arg2))' style="@Getstyle(i)">/@Deltalogic.CNC_File_Out_Array_dir[i]</td>

                </tr>
            }
        }
    }

</table>

@code {
  int selectedId = -1;

  void HandleClick(int id, string args0, string args1, string args2)
  {
     selectedId = i;
     Read_CNC_Files(arg0,arg1,arg2);
  }

  void Getstyle(int id)
  {
     if (selectedId == i)
         return "background-color:red;";
     return string.Empty;
  }
 }

You can change the class or style as you want according to the index of the line.