[Alessio18911]

Привет всем! JS изучаю не так давно. Есть блок из 2-х кнопок, которые меняют цвет при переключении друг на друга. Написал скрипт, он работает в хроме, в Microsoft Edge, но IE 11 (думаю, и в IE 10 тоже) не работает.. Кнопки не переключаются. Подскажите, как исправить и в чём проблема

<div class="button-tabs">
     <button class="button-tabs__btn is-active"><span style="position: relative;">Левый</span></button>
     <button class="button-tabs__btn"><span style="position: relative;">Правый</span></button>
</div>

.button-tabs {
    display: inline-block;
    vertical-align: top;
}

.button-tabs__btn {
    padding: 12px 25px;
    margin: 0 10px 0 0;
    font: inherit;
    line-height: 20px;
    background: none;
    border: 1px solid violet;
    border-radius: 30px;
    transition: border-color 0.25s ease-in-out, background 0.25s ease-in-out, color 0.25s ease-in-out;
    cursor: pointer;
}

.button-tabs__btn:last-child {
    margin: 0;
}

.button-tabs__btn:hover {
    border-color: red;
}

.is-active {
    color: white;
    background: blue;
    border-color: transparent;
}

var buttonTabsBtn = document.querySelectorAll(".button-tabs__btn");

buttonTabsBtn.forEach(function (item, i) {
    item.addEventListener('click', function (e) {
                    
         buttonTabsBtn.forEach(function (item, i) {
                        
              item.classList.remove('is-active');
         });

         item.classList.add('is-active');
    });                
});