Держите классы на аккордеонах, если нажимаются другие кнопки

Question

У меня такая структура HTML аккордеонов. 3.

<div id="accordion<?php echo $accordion_id ?>" role="tablist" class="accordion--contact-us">
  <div class="card-header" role="tab" id="<?php echo $accordion_title . $accordion_id ?>">
                <h5 class="my-0 font-weight-bold h3">
                    <a class="dnt link collapsed py-3 accordion-tabs" data-toggle="collapse" href="#collapse<?php echo $accordion_title . $accordion_id ?>" aria-expanded="false"
                        aria-controls="collapse<?php echo $accordion_title . $accordion_id ?>">
                        <?php echo $accordion_title ?>
                        <i class="far fa-angle-down"></i>
                    </a>
                </h5>
  </div>
</div>

У меня установлен jquery, где, если вы откроете аккордеон и снова щелкните по нему, он закроется. Однако проблема в том, что на странице несколько аккордеонов. Если я нажимаю все, скажем, 5 аккордеонов в одном аккордеоне, все работает нормально. Но когда я нажимаю на другой аккордеон, когда оригинал был открыт, он удаляет этот класс.

Что мне может не хватать. Часть if работает, а не else. Если щелкнуть тот же элемент, он закрывает мелкое добавление / удаление классов. Но если я нажму на .card-header в другом аккордеоне, класс .isActive будет удален из всех, кроме того, который только что щелкнул. Итак, открытые классы .isActive удаляются.

    $('.card-header').on('click', function() {

        if ($(this).hasClass('isActive')) {
            $('.card-header').removeClass('isActive');
            $(this).find('a').blur();
        } else {
            $('.card-header').removeClass('isActive');
            $(this).toggleClass('isActive');
        }

    })