To keep the opened collapsible panel open after an AJAX refresh

I have a main page which has a partial view. The partial view is refreshed every 60 seconds and I use AJAX to load the partial view. The code for the main page and the scripts and styles are as below.

@{
ViewBag.Title = "Home Page";
}
@model SampleApp1.Models.Model1

<style>
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
content: "\e114";    /* adjust as needed, taken from bootstrap.css */
float: right;        /* adjust as needed */
color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e113";    /* adjust as needed, taken from bootstrap.css */
}

</style>

<div id="MainPage">
@Html.Partial("_PartialPage1")
</div>


<script>
window.setInterval(function () {
    loadView();
}, 60000
    );

function loadView() {
headerArray=$('#accordion').find('[aria-expanded=true]').closest('a');
bodyArray=$('#accordion').find($('.in'));
    var targetUrl = '/Home/GetIndex';
    $.ajax({
        url: targetUrl,
        type: 'GET',
        cache: true,
        async: true,
    }).done(function (partialViewResult) {
        $("#MainPage").html(partialViewResult);
jQuery.each(headerArray, function (index, item) {
    $(this).removeClass('collapsed');
    $(this).attr('aria-expanded=true');
    console.log($(this))
});
jQuery.each(bodyArray, function (index, item) {
    $(this).addClass('in');
    $(this).attr('aria-expanded=true');
    console.log($(this))
});

    });
}

The partial view is basically a set of tabs developed using collapsible panels. I am trying to store the panels that are open and then load it as open after the screen refresh.

<div class="panel-group" id="accordion">
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle collapsed" data-toggle="collapse"  href="#collapseOne">
               @Model.Header1
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
            @Model.Tab1
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle collapsed" data-toggle="collapse"  href="#collapseTwo">
                @Model.Header2

            </a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            @Model.Tab2
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle collapsed" data-toggle="collapse"  href="#collapseThree">
                @Model.Header3

            </a>
        </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
            @Model.Tab3
        </div>
    </div>
</div>

My script does not seem to work and all panels are collapsed after refresh. Am i missing something? Is there another way of doing it?

EDIT: Adding the code inside the AJAX portion did not help. When I debug from the console the tabs are open until the loadView function and when the control goes back to 60,000 it seems to collapse.

This question is pretty similar to my question, this was also not resolved.