Активная, не активная кнопка?

вопрос

Всем привет,сел на такой ерунде, не работает никакой инетовский скрипт чтобы я выбирал несколько кнопок и они были активными, помогите пожалуйста.

Требуется,чтобы при нажатии каждой кнопки она становилась активной, нажав еще раз она не активная. Изначально не активна. Активные не по отдельности, а нажал первую и вторую, первая и вторая должны быть активны.

Имеется такой код, кстати это модуль field search


<button class="btn btn-info" id="btn1" data-toggle="collapse" data-target="#hide-me" style="    border-radius: 15;
  right:40%;
    position: absolute;background: rgba(255, 200, 0, 0.92);">Расширенный поиск</button>
     
<div id="hide-me" class="collapse">
    <br> <br> <br> 
<div class="search-form" style="margin-top: 0;">
    <form id="searchform" class="sections-list" action="">
        
        <input type="hidden" name="tsn" value="4">

        <section class="search-form__layout">
            <ul class="search-form__list">
                <li>
                    <label data-toggle="section-check">
                        <input type="checkbox" name="cat" value="2" hidden="">
                        <span class="btn">Перфоманс</span>
                    </label>
                </li>
                <li>
                    <label data-toggle="section-check">
                        <input type="checkbox" name="cat" value="3" hidden="">
                        <span class="btn">Детский</span>
                    </label>
                </li>
                <li>
                    <label data-toggle="section-check">
                        <input type="checkbox" name="cat" value="4" hidden="">
                        <span class="btn">Страшный</span>
                    </label>
                </li>
                <li>
                    <label data-toggle="section-check">
                        <input type="checkbox" name="cat" value="5" hidden="">
                        <span class="btn">Сюжетный</span>
                    </label>
                </li>
            </ul>
        </section>

Пробовал такой тогл


      <script>
        function toggleActiveState() {
            this.classList.toggle('active');
        }
        var btns = document.querySelectorAll('.btn');
        [].forEach.call(btns, function(btn) {
          btn.addEventListener('click', toggleActiveState, false);
        });
    </script>

Перепробовал еще кучу других,не работают и все, помогите, что делаю не так..