How to change a button value from "buttonX" to "clicked" on clicked? - asp.net-core-mvc

Question

This is a homework that I'll have to create a "x" amount of buttons and when I click on any button, it should change its value/label from "buttonX" to "clicked".
By clicking in another button, the first will reset to "buttonX" and the new button will change to "clicked".
So far I was able to create the "x" amount of buttons, but I dont know how to make them clickable to change its value back and forth.
Here's my model:
namespace buttonTag.Models {
public class Button {
private const int QTY_BTN = 10;
public Button() {
}
public int buttons {
get {
return QTY_BTN;
}
}
}
}
And this is my Razor page:
#model buttonTag.Models.Button;
<form asp-controller="Home" asp-action="Button">
<div class="form-group">
#{
for(int i=1; i<#Model.buttons + 1; i++) {
<input type="submit" value=#("Button" + i) class="btn btn-primary ml-4 mb-4" />
}
}
</div>
</form>
Any help?

Answer 1

Here is a simple workaround like below:
<form asp-controller="Home" asp-action="Button">
<div class="form-group">
#{
for (int i = 1; i < #Model.buttons + 1; i++)
{
<input type="button" id="#i" value=#("Button" + i) class="btn btn-primary ml-4 mb-4" onclick="Test(#i)" />
}
}
</div>
</form>
#section Scripts{
<script>
var item;
function Test(i) {
if (i != item) {
if (($("#" + i)).val().startsWith('Button')) {
$("#" + i).val("Clicked");
}
}
$("#" + item).val("Button" + item);
item = i;
return item;
}
</script>
}
Result: