Hide or show span inside of repeater on checkbox change via Javascript

I have an asp repeater that is populated from a hashtable containing names of school classes (Key) and the description of those classes (Value). I want to show/hide the descriptions that are encapsulated in a span based on if a checkbox input is checked or not.

I have managed to pass the current repeaters iteration number by passing Container.ItemIndex as a parameter to my JS method in hope that I could get the repeater collection and just reference the ID of the span at that index.

I have also tried naming the ID of the span as "string" + Container.ItemIndex hoping I could get the span that way but also no luck.

Below is my aspx code, please help me hide/show the spnMoreInfo span of the repeater iteration that the user has checked or unchecked the checkbox of in JavaScript.

```
    <asp:Repeater runat="server" id="rptClassList" >
    <ItemTemplate>

        <span class="text-center;" style="font-size: 24px; font-weight: 200"><%#((DictionaryEntry)Container.DataItem).Key%></span>

        <label class="switch">
            <input type="checkbox" runat="server" CssClass="rpContacts" onchange='<%# "return HideShow(" + Container.ItemIndex + ")" %>'>
            <span class="slider round"></span>
        </label><br/>

        <span runat="server" id="spnMoreInfo" class="text-center;" style="display: none"><%#((DictionaryEntry)Container.DataItem).Value%> </span>

    </ItemTemplate>
</asp:Repeater>
```