In my project I have a field that is the Status of a given occurrence. That is, whether it is pending or resolved. I made a function in javascript that, when clicking the input field that is in readonly mode, changes the background. I mean, if the value inside the input is solved, the input goes green, and if the input value is Pending it turns red.

What happens is that it works perfectly, but to have a problem: this function is only done in the first occurrence of the input. I have an index, and it has a foreach to iterate over all the database data for occurrences, that is, I have several inputs on the status.

What happens is that the function only runs on the first occurrence of the list, the rest nothing happens.

Another thing is that, I wanted to save the or edit the occurrence, when I returned to the index to show, I already applied the function, without the user having to click or hover over. If it were automatic, I say, if the value of the input is Pending, it would turn red, if the value is resolved, it would turn green.

Can anyone help me?

View (where is the whole code)

@*@model IEnumerable<CEF01.Models.Ocorrencia>*@
    @model PagedList.IPagedList<CEF01.Models.Ocorrencia>
        @using PagedList.Mvc;
       <link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
   <style>
       #Status {
           text-align: center;
             }

        .resolvido {
    background-color: green;
    font-family: 'Times New Roman';
    color: white;
           }

         .pendente {
    background-color: red;
    font-family: 'Times New Roman';
    color: white;
        }
       </style>

        @{
          ViewBag.Title = "Index";
     }


       @Html.ActionLink("Criar uma nova ocorrência", "Adiciona", null, new { @class = "btn btn-primary" })
              @Html.ActionLink("Lista de Alunos", "Index", "Alunos", null, new { @class = "btn btn-primary" })

             <span class="pull-right">
            @using (Html.BeginForm("Index", "Ocorrencias", FormMethod.Get))
            {
    <p>
        Busca Aluno: @Html.TextBox("busca")
        <input type="submit" value="Procurar" class="btn btn-info" />
    </p>
           }

           </span>

            <table class="table">
             <tr>
    <th>
        @*@Html.DisplayNameFor(model => model.Aluno.Nome)*@
        Nome do Aluno
    </th>
    <th>
        @*@Html.DisplayNameFor(model => model.Tipo)*@
        Tipo
    </th>
    <th>
        @*@Html.DisplayNameFor(model => model.Causa)*@
        Causa
    </th>
    <th>
        @*@Html.DisplayNameFor(model => model.Descricao)*@
        Descrição
    </th>
    <th>
        Status
    </th>
</tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Aluno.Nome)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Tipo)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Causa)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Descricao)
        </td>
        <td>
            @*@Html.DisplayFor(modelItem => item.Status)*@
            <input type="text" name="Status" id="Status" value="@Html.DisplayFor(modelItem => item.Status)" readonly onmousemove="trocaCor()" />
        </td>
        <td>
            @Html.ActionLink("Editar", "Edita", new { id = item.Id }) |
            @* @Html.ActionLink("Details", "Details", new { id=item.Id }) | *@
            @Html.ActionLink("Remover", "Remove", new { id = item.Id })
        </td>
    </tr>
        }

        </table>
          <br />
              Pagina @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) de @Model.PageCount
        @Html.PagedListPager(Model, pagina => Url.Action("Index", new { pagina, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

       @section Scripts {
@Scripts.Render("~/bundles/jqueryval")

<script>
    function trocaCor() {
        var troca = document.getElementById("Status");
        if (troca.value == "Pendente") {
            $("#Status").addClass("pendente");
        }
        if (troca.value == "Resolvido") {
            $("#Status").addClass("resolvido")
        }
    }
</script>
      }