How to do Onclick Button show and Hide in foreach case using jquery or javascript?

Question

I am using a accordion for closing and opening content when clicked.

It has a bar section which, when clicked, content below will show like on this example : http://jeevanscientific.com/resources.html

I need to add a up button/downbutton on rightside of each bar.
Once clicked on particular bar only that bar shows down button. It is like hiding and showing down and up button with respect to button click.

The problem is that I am using a foreach to display items. How can I implement this scenario ?

Here is my HTML :

foreach (var i in footerPage.StaticPagePersons)
{
    <H1>@Html.Raw(@i.Type) </H1>
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading datalist" id="" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id">
                <i class="fa fa-chevron-down table-middle" aria-hidden="true"></i>
                <i class="fa fa-chevron-up table-middle" aria-hidden="true"></i>
                <h1 class="accordion-toggle table-middle">
                    @Html.Raw(@i.Name)
                </h1>
            </div>
            <div id="@i.Id" class="accordion-body collapse out">
                <div class="accordion-inner">
                    <img ng-src="@i.ImagePath" alt="logo" class="img-thumbnail img-wrap content-image" />
                    <h1>@Html.Raw(@i.Name)</h1>
                    <h3>@Html.Raw(@i.Title)</h3>
                    <br />
                    @Html.Raw(@i.BioDetail)
                </div>
            </div>
        </div>
    </div>
}

Clarification

right side of each tab.. that's requirement... when clicked should show up button, else down button