I have a list of accordions inside a parent accordion like:

```
<div id="parentAccordion" class="card-accordion">
        <div class="card">
            <div class="card-header bg-black text-white pointer-cursor">
                <div class="row">
                    <div style="font-size:16px">Custom - <span data-bind="text:$root.nameSelected"></span></div>
                </div>
            </div>
            <div id="parentBody" class="collapse show" data-parent="#parentAccordion" style="background-color: #d9e0e7">
                <!-- begin #accordion -->
                <div id="oAccordion" class="card-accordion">
                    <!-- begin card -->
                    <div class="card" data-bind="foreach:$root.fbolist">
                        <div style="padding: 3px">
                            <div class="card-header bg-black text-white pointer-cursor" data-toggle="collapse" data-bind="attr: { href: '#O'+CourseId(), title: cName }">
                                <i class="fa fa-caret-right"></i>
                                <span data-bind="text:cName">NAME</span>
                            </div>
                            <div class="collapse" data-bind="attr:{'id':'O'+CourseId()}" data-parent="#oBody">
                                <div class="card-body white text-justify">
                                    <!-- body here -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

```

And I'm trying to change the icon when expanded to caret-down and when collapsed to caret-right. Only one accordion from the child list (fbolist) should be expanded at a time, collapsing the others. 
I've used this js to change the icons:

```
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".fa-caret-right").removeClass("fa-caret-right").addClass("fa-caret-down");
}).on('hidden.bs.collapse', function () {
    $(this).parent().find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-right");
});

```

but it changes all the icons for the rest of the accordions that are inside Knockout foreach. 
Is there a way to not change all icons to caret-down when only one expanded? It should have this icon only the expanded one and the others caret-right