Bootstrap nested accordion font-awesome icons

I've a 3 level nested bootstrap accordion which is working fine, but I want a change in the panel-heading div where I can use a font-awesome icon fa fa-chevron-down when the accordion is opened (Without affecting the nested accordions) and fa fa-chevron-right when accordion is collapsed. I'm using this code to changing the icon:

$('div.panel-collapse.collapse').on('shown.bs.collapse', function () {
    $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-down");
    $(this).parent().find('.panel-heading').css('background', '#0271BC');
}).on('hidden.bs.collapse', function () {
    $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-right");
    $(this).parent().find('.panel-heading').css('background', '#02A4EF');
});

HTML:

<a href="#aspnetcore" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#accordion">
                <div class="panel panel-default">
                    <div class="panel-heading outer web">
                        <h4 class="panel-title fonter font-light-text">
                            <i class="fa fa-chevron-down pull-right"></i> Getting Starting with ASP.NET Core 1.0
                        </h4>
                    </div>
                    <div id="aspnetcore" class="panel-collapse collapse outer-arrow">
                        <div class="panel-body">
                            <div class="panel-group" id="webdevelopment">
                                <a href="#frontend" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#webdevelopment">
                                    <div class="panel panel-default">
                                        <div class="panel-heading middle-link-web">
                                            <h4 class="panel-title font-light-text">
                                                <i class="fa fa-chevron-down pull-right"></i> Front-End
                                            </h4>
                                        </div>
                                        <div id="frontend" class="panel-collpase collapse outer-arrow">
                                            <div class="panel-body">
                                                <div class="panel-group" id="webdevelopment">
                                                    <a asp-controller="Web" asp-action="Grunt" class="accordion-toggle lab-link">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading middle-link">
                                                                <h4 class="panel-title font-light-text">
                                                                    Grunt Task Runner
                                                                </h4>
                                                            </div>
                                                        </div>
                                                    </a>
                                                    <a href="#angular" class="accordion-toggle tutorial-panel-heading inner-link" data-toggle="collapse" data-parent="#frontend">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading middle-link-web">
                                                                <h4 class="panel-title font-light-text">
                                                                    <i class="fa fa-chevron-down pull-right"></i> Angular
                                                                    2
                                                                </h4>
                                                            </div>
                                                            <div id="angular" class="panel-collpase collapse">
                                                                <div class="panel-body">
                                                                    <a asp-controller="Web" asp-action="Angular" class="accordion-toggle lab-link">
                                                                        <div class="panel panel-default">
                                                                            <div class="panel-heading middle-link">
                                                                                <h4 class="panel-title font-light-text">
                                                                                    Introduction to Angular 2
                                                                                </h4>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </a>

                                                    <a class="accordion-toggle lab-link">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading middle-link">
                                                                <h4 class="panel-title font-light-text">
                                                                    LESS and SASS <i class="fa fa-cog fa-spin fa-fw"></i>
                                                                </h4>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <a href="#backend" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#webdevelopment">
                                    <div class="panel panel-default">
                                        <div class="panel-heading middle-link-web">
                                            <h4 class="panel-title font-light-text">
                                                <i class="fa fa-chevron-down pull-right"></i> Back-End
                                            </h4>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </a>

But this code also change the icons of the nested accordions which are not opened yet. Is there any better way to resolve this issue will be appreciated.