Update only two columns of table in razor pages

Question

I have a razor page configuration that returns a a partial view with an entire table in it:

<div class="col-12 border text-left p-3 mt-3 d-flex">
    <table id="valuesTable" class="table table-striped">
        <thead>
            <tr class="table-secondary">
                <th>
                    <label>ID</label>
                </th>
                <th>
                    <label>Name</label>
                </th>
                <th>
                    <label>Type</label>
                </th>
                <th>
                    <label>Value</label>
                </th>
                <th>
                    <label>Last update</label>
                </th>
                <th>
                    <label>VT</label>
                </th>
            </tr>
        </thead>
        <tbody id="refreshable"></tbody>
    </table>
</div>

this works in conjunction with an AJAX call:

    $.ajax({
        url: '/?handler=IndexPartial',
        data: {
            visualizationOptions: visualizationOptions,
            searchPorts: searchPorts,
            searchVars: searchVars
        },
        success: function (data) {
            document.getElementById('refreshable').innerHTML = data;
        }
    })

And in my controller I have someting like this:

public List<Models.Variable> Data;
public List<SelectListItem> Ports { get; set; }
public Port selectPort { get; set; }
public List<SelectListItem> Vars { get; set; }
public Var selectVar { get; set; }

public IndexModel(ILogger<IndexModel> logger)
{
    _logger = logger;
}

public void OnGet()
{
    var ports = populatePorts().ToList();
    ViewData["MyPorts"] = ports;
    this.Ports = ports;

    var vars = populateVars().ToList();
    ViewData["MyVars"] = vars;
    this.Vars = vars;

    this.Data = Utils.fetchInputs();
}

public PartialViewResult OnGetIndexPartial(string visualizationOptions, string searchPorts, string searchVars)
{
    var ports = populatePorts().ToList();
    this.Ports = ports;
    var vars = populateVars().ToList();
    this.Vars = vars;
    List<Models.Variable> result = Utils.fetchInputs();
    //I APPLY FILTERS TO THE DATA HERE
    this.Data = result;
    return Partial("_Index", this);
}

But as you can see, this prompts me to regenerate all the table, when in reality, I would like to only update teh Value an last update columns every second or so.

I've tried passing a JSON, using the javascript to get the values, but I never arrive at a sensible solution. Any help would be appreciated, including examples of tables that update only certain values and not the entire row

UPDATE

this is my partialView:

@model IndexModel

@foreach (var item in Model.Data)
        {
            String genID = item.name.ToString();
            String visualizationOptionRowID = genID + "VisualizationOption";
            <tr id="@(genID)">
                @if (item.ID == -1)
                {
                    <td>-</td>
                }
                else
                {
                    <td>@item.ID</td>
                }
                <td>@item.name</td>
                <td>@item.type</td>
                <td>@item.value</td>
                <td>@item.lastUpdate</td>
                @switch (item.vt)
                {
                    case "Dec":
                        <td id="@(visualizationOptionRowID)">
                            <input type="radio" name="@(genID)" value="Dec" checked="checked" />Dec
                            <input type="radio" name="@(genID)" value="Hex" />Hex
                            <input type="radio" name="@(genID)" value="Bit" />Bit
                        </td>
                        break;
                    case "Hex":
                        <td id="@(visualizationOptionRowID)">
                            <input type="radio" name="@(genID)" value="Dec" />Dec
                            <input type="radio" name="@(genID)" value="Hex" checked="checked" />Hex
                            <input type="radio" name="@(genID)" value="Bit" />Bit
                        </td>
                        break;
                    case "Bit":
                        <td id="@(visualizationOptionRowID)">
                            <input type="radio" name="@(genID)" value="Dec" />Dec
                            <input type="radio" name="@(genID)" value="Hex" />Hex
                            <input type="radio" name="@(genID)" value="Bit" checked="checked" />Bit
                        </td>
                        break;
                    default:
                        <td id="@(visualizationOptionRowID)">
                            <input type="radio" name="@(genID)" value="Dec" checked="checked" />Dec
                            <input type="radio" name="@(genID)" value="Hex" />Hex
                            <input type="radio" name="@(genID)" value="Bit" />Bit
                        </td>
                        break;
                }
            </tr>
        }