Así que tengo mi Vista de índice en la que tengo una tabla que me enumera todos los datos que necesito, a través de un bucle foreach. Aquí está parte de mi Index.cshtml

 <table class="table"> @foreach (var item in Model) { <tr> <td style="vertical-align:middle"> <div> <img src="@("~/image/"+item.Poza)" asp-append-version="true" width="135" height="210" align="left" style="margin-right: 15px" /> </div> <td style="vertical-align: middle"> <div> <span style="font-weight:bold">Titlu: </span><span>@Html.DisplayFor(modelItem => item.Titlu)</span> </div> <div> <span style="font-weight:bold">An: </span><span> @Html.DisplayFor(modelItem => item.An)</span> </div> <div> <span style="font-weight:bold">Durata: </span><span> @Html.DisplayFor(modelItem => item.Durata)</span> </div> <div> <span style="font-weight:bold">Nota: </span><span> @Html.DisplayFor(modelItem => item.Nota)</span> </div> <div> <span style="font-weight:bold">Recenzie: </span><span> @Html.DisplayFor(modelItem => item.Descriere)</span> </div> </p> @if (item.UserId != ViewBag.userid) {<form asp-action="PostLike" asp-route-id="@item.Id"> <input id="btn" type="submit" value="Like" class="btn btn-primary" /> </form>} </td> </tr> } </table>

Cerca del final de la página, tengo mi botón Me gusta. Me gustaría cambiar su color cuando se presiona, y volver a cambiarlo en el siguiente clic, para que el usuario sepa qué películas le gustaron y cuáles no. ¿Cómo podría hacer esto? Porque si agrego una función javascript simple como

 function color1() { document.getElementById("btn").style.backgroundColor = "red"; }

cambia solo el color del primer botón. Menciono que cada vez que se hace clic en el botón Me gusta, la página se actualiza. Entonces necesito que el color del botón permanezca sin cambios.