Как сделать активной иконку отдельно каждую?

у меня есть кастомный селект инпут. У select__btn через after сделана иконка стрелочка вниз. Когда я нажимаю на кнопку то добавляется активный класс, и стрелочка поворачивается. Всё вроде нормально. Но есть проблема, когда я делаю 2 инпута таких, то стрелочки одновременно поворачиваются на обеих инпутах, а мне нужно что бы только на одном. Как это реализовать?

 <div class="select__menu">
              <div  class="select__btn">
                Time
              </div>
              <ul  class="select__options">
                <li class="select__option">Time</li>
                <li class="select__option">10:00 am</li>
                <li class="select__option">11:00 am</li>
                <li class="select__option">12:00 pm</li>
                <li class="select__option">14:00 pm</li>
                <li class="select__option">16:00 pm</li>
                <li class="select__option">18:00 pm</li>
                <li class="select__option">20:00 pm</li>
              </ul>
            </div>
let index = 1;

const on = (listener, query, fn) => {
    document.querySelectorAll(query).forEach(item => {
        item.addEventListener(listener, el => {
            fn(el);
        })
    })
}

on('click', '.select__btn', item => {
    const next = item.target.nextElementSibling;
    next.classList.toggle('active');
    
});
on('click', '.select__option', item => {
    item.target.parentElement.classList.remove('active');

    const parent = item.target.closest('.select__menu').children[0];
    parent.setAttribute('data-type', item.target.getAttribute('data-type'));
    parent.innerText = item.target.innerText;
});