ASP.NET Core 8 MVC TempData integer incrementation on button click (bonus: without a redirect/view reload)

Question

I am trying to create an MVC based simon says game. I am modeling it based off of this JS driven HTML Simon says project. See here: https://www.mathsisfun.com/games/simon-says.html

I'd like to achieve a Blazor like experience, where a button click can increment the "sequence" count (of how far/many clicks you are deep into Simon says. Check out the game above for reference.)

The problem I think, is that every click will refresh the page, wiping the value of TempData since it's server side. I suppose I am OK with a refresh, but how do I retain the value of TempData for every single click? I do not want to create a database and session GUIDs just for this. There must be something simple I am missing?

Should I use TempData.Keep() in my Index's action method?

Here is my HTML so far:

@Model.sequenceCounter

<div style="position:relative; width:100%;  margin:auto; display:block;">
    <div style="position: relative; border-radius: 50%; margin: auto; padding: 5vmin; width: 75vmin; height: 75vmin; background: rgba(0,0,49,0.6); ">
        <div style="position: relative; border-radius: 50%; width: 100%; height: 100%; overflow: hidden;">
            <button class="btn-simon btn-simon-green" id="0" style="opacity: 0.3;"></button>
            <button class="btn-simon btn-simon-red" id="1" style="opacity: 0.3;"></button>
            <button class="btn-simon btn-simon-orange" id="2" style="opacity: 0.3;"></button>
            <button class="btn-simon btn-simon-cyan" id="3" style="opacity: 0.3;"></button>
            <div id="circ" style="position: absolute; margin: 30% 30%; border-radius: 50%; border: 3px solid #111; width: 38%;   height: 38%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, #777777 80%), #004; color: #fff; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.5);">
                @(TempData["test"] = (int)TempData["test"] + 1);
                <a asp-controller="Games" asp-action="SimonSays" name="SimonSays">
                    @(Model.sequenceCounter != 0 ? Model.sequenceCounter : "Play")
                    WORK PLEASE :/
                    @TempData["test"] IS ALWAYS 1, WHY!
                </a>
            </div>
        </div>
        <div id="msg" style="display: flex; align-items: center; justify-content: center; text-align: center; position: absolute; left: 40%; top: 40%; font: 9vmin Arial; width: 20%; height: 20%; color: rgb(187, 204, 255); pointer-events: none;">
        </div>
    </div>
</div>

How can I, with ASP.NET Core 8 MVC (preview), increment an integer value and update my DIV's content with it, without refreshing ideally?

Could I store it in my SimonSays model, and somehow pass the model back rebuilt each time with an incremented value?

Here is my model:

public class SimonSays
{        
    public SimonSays()
    {
    }

    [Key]
    [DisplayName("Session Id")]
    public int Id { get; set; }

    public string currentColor = "";
    public int sequenceCounter { get; set; }
}

This is my GamesController relevant action method:

public IActionResult SimonSays()
{
        //if (@Model.sequenceCounter == -1)
        //{
        //    // new game
        //    simon.sequenceCounter++;
        //}
        //else
        //{

        //}

        if (TempData["test"] is null)
        {
            TempData["test"] = 1;
        }
        else
        {
            // keeps going back to null on refresh.. not working as expected
            TempData["test"] = (int)TempData["test"] + 1;
        }

        SimonSays simon = new SimonSays
                              {
                                  sequenceCounter = (int)TempData["test"]
                              };

        return View(simon);
    }
}

I just want to keep track for the user, how far they've gotten. Seems simple.

Can I do this without Blazor?

Thank you very much.

Edit: the solution for me was to simple add TempData.Keep() at the end of the calls.