c# - Javascript for a list of html elements not working

Question

I have a problem. i would like to display some elements of a table when user click on an span icon using javascript.

I don't find the problem. normally i should click on the icon and display the list of elements associated to the title. i verify and if a display all rows i have the good list by title.

my view is here:

@{
    ViewData["Title"] = "CalendrierPFL";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<h1 class="text-center">Calendrier PFL</h1>
<br />

<!--https://www.w3.org/WAI/tutorials/tables/irregular/ Pour faire une table avec ce format-->
<table class="table table-bordered">
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <tr class="text-center">
        <td rowspan="2">Zones</td>
        <th colspan="2" scope="colgroup">Lundi</th>
        <th colspan="2" scope="colgroup">Mardi</th>
        <th colspan="2" scope="colgroup">Mercredi</th>
        <th colspan="2" scope="colgroup">Jeudi</th>
        <th colspan="2" scope="colgroup">Vendredi</th>
        <th colspan="2" scope="colgroup">Samedi</th>
        <th colspan="2" scope="colgroup">Dimanche</th>
    </tr>
    <tr>
        @for (int i = 0; i < 7; i++)
        {
            <th scope="col">Matin</th>
            <th scope="col">Aprèm</th>
        }
    </tr>
    @for (int j = 0; j < Model.InfosZoneCalendrier.Count(); j++)
    {
        <tr>
            <th scope="row">
                @Model.InfosZoneCalendrier[j].NomZone
                <span class="fas fa-caret-down" onclick="showEquipements(@Model.InfosZoneCalendrier[j].NomZone)"></span>
            </th>
            @for (int y = 0; y < Model.InfosZoneCalendrier[j].ListEquipements.Count(); y++)
            {
                <tr class="hide" style="display:none" id="@Model.InfosZoneCalendrier[j].ListEquipements[y]" name="@Model.InfosZoneCalendrier[j].NomZone" >
                    <th style="color:gray">@Model.InfosZoneCalendrier[j].ListEquipements[y]</th>
                </tr>
            }
        </tr>
    }
</table>

@section Scripts
{
    <!-- JS includes -->
    <script type="text/javascript">

        function showEquipements(parameter) {
            var div = document.getElementsByName(parameter);
            var i;
            for (i = 0; i < div.length; i++) {
                if (div[i].style.display == "") {
                    div[i].style.display = "none";
                } else {
                    div[i].style.display = "";
                }
            }        
        }

    </script>
}

Thanks in advance for your help :)

Answer 1

Problem resolved if this can interest someone :)

<span class="fas fa-caret-down" onclick="showEquipements(@Model.InfosZoneCalendrier[j].*NomZone*)"></span>

at the place of NomZone i put an integer Id unique to difference each option. It works!

So i made like this:

<span class="fas fa-caret-down" onclick="showEquipements(@Model.ListResasZone[j].IdZone.ToString())"></span>