Как сбросить счетчик кликов для всех кнопок при нажатии на другую кнопку? (JavaScript + HTML)

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

При нажатии на кнопку (их несколько) все работает корректно, первый клик - присваивает класс актив, добавляет стрелку вверх, второй клик - актив и стрелка вниз, третий клик - снимает актив и убирает стрелку.

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

1. Есть кнопка "X", я нажимаю на неё 1 раз (1ый клик), получаю актив и стрелку вверх. (все ок)
2. Затем, я нажимаю на кнопку "Y" (1ый клик), с кнопки "X" актив снялся, "Y" получает актив и стрелку вверх. (тоже все ок)
3. И вот тут проблема - если я, после пунктов 1 и 2, нажимаю на кнопку "X", то скрипт считает это вторым кликом, т.е. я получаю актив + стрелка вниз.

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

Вот такой код у меня в данный момент

document.addEventListener("DOMContentLoaded", function() {

    var containerSortBtns = document.querySelector('.offers-top-table-titles');
    var sortBtns =  containerSortBtns.querySelectorAll('p');

    sortBtns.forEach(function(btn) {

        var clickOnBtn = 0;

        btn.addEventListener("click", function() {
            clickOnBtn = clickOnBtn + 1;

            sortBtns.forEach(function(otherBtn) {
                if (otherBtn !== btn) {
                    otherBtn.clickOnBtn = 0;
                }
            });

            if (clickOnBtn % 3 === 0) {
                sortBtns.forEach(function(btn) {
                    btn.classList.remove("active");
                    btn.textContent = btn.textContent.replace(/ ▲| ▼/g, '');
                });
            } else if (clickOnBtn % 3 === 1) {
                sortBtns.forEach(function(btn) {
                    btn.classList.remove("active");
                    btn.textContent = btn.textContent.replace(/ ▲| ▼/g, '');
                });
                this.classList.add("active");
                this.textContent += " ▲";
            } else if (clickOnBtn % 3 === 2) {
                sortBtns.forEach(function(btn) {
                    btn.classList.remove("active");
                    btn.textContent = btn.textContent.replace(/ ▲| ▼/g, '');
                });
                this.classList.add("active");
                this.textContent += " ▼";
            }
        });
    });
});