Смена класса при нажатии на кнопку

    <button onclick="" class="nav__link"><span><img src="./img/book.png" width="110px" height="110px"></span></button> 
 
    <div class="text"> 
        <h3>+ Booking</h3> 
        <p>Some Text</p> 
    </div> 
    <div class="poly"> 
        <img src="./img/poly.png" alt="" style="height: 15px;"> 
    </div> 
    <button onclick="" class="nav__link"><span><img src="./img/book.png" width="110px" height="110px"></span></button> 
 
        <div class="text"> 
            <h3>+ Booking</h3> 
            <p>Some Text</p> 
        </div> 
        <div class="poly"> 
            <img src="./img/poly.png" alt="" style="height: 15px;"> 
        </div> 
        <button onclick="" class="nav__link"><span><img src="./img/book.png" width="110px" height="110px"></span></button> 
     
        <div class="text"> 
            <h3>+ Booking</h3> 
            <p>Some Text</p> 
        </div> 
        <div class="poly"> 
            <img src="./img/poly.png" alt="" style="height: 15px;"> 
        </div> 
    <script language="JavaScript"> 
        window.onload = function () { 
            var polys = document.querySelectorAll(".buttonContainer .nav__link"); 
            var act = document.querySelectorAll(".buttonContainer .poly"); 
            for (let i = 0; i < polys.length; i++){ 
                polys[i].addEventListener("click", function() { 
                    polys.forEach(pls => { 
                        pls.classList.remove("active"); // Удаляем active у всех элементов 
                    }); 
                    act.forEach(pls1 => { 
                        pls1.classList.remove("active"); // Удаляем active у всех элементов 
                    }); 
                    polys[i].classList.toggle("active"); // Переключаем класс активного элемента на active 
                    act[i].classList.toggle("active"); // Переключаем класс активного элемента на active 
                }); 
            } 
        }; 
    </script>

let prevElements = []; // Для предыдущего нажатого элемента. 
document.querySelector(".buttonContainer").addEventListener("click", (e) => { 
  let button = e.path.find(el => el.classList && el.classList.contains("nav__link") ? true : false); 
  if (!button) return false; 
  let poly = findElClassPoly(button.nextElementSibling, "poly"); // Ищем элемент с классом poly 
  let els = [button, poly]; // Массив элементов (можно обойтись без него). 
  if (button.classList.contains("active")) { // Если нажали на active элемент (второй раз). 
    els.forEach(el => el.classList.remove("active")); 
    return false; 
  } 
  if (prevElements) { // Если есть предыдущий элемент, удаляем класс active 
    prevElements.forEach(el => el.classList.remove("active")); 
    prevElements.length = 0; // Удаляем предыдущий элемент 
  } 
  els.forEach(el => { 
    el.classList.add("active"); 
    prevElements.push(el); // Добавляем текущий элемент. 
  }); 
}); 
 
function findElClassPoly(elem, cl) { 
  if (elem.classList.contains(cl)) return elem; 
  return findElClassPoly(elem.nextElementSibling, cl); 
}

.nav__link.active { 
  background-color: lightgreen; 
} 
 
.poly.active { 
  background-color: lightgreen; 
}

<div class="buttonContainer"> 
  <button class="nav__link"><span><img src="./img/book.png" width="110px" height="110px"></span></button> 
  <div class="text"> 
    <h3>+ Booking</h3> 
    <p>Some Text</p> 
  </div> 
  <div class="poly"> 
    <img src="./img/poly.png" alt="" style="height: 15px;"> 
  </div> 
 
  <button class="nav__link"><span><img src="./img/book.png" width="110px" height="110px"></span></button> 
  <div class="text"> 
    <h3>+ Booking</h3> 
    <p>Some Text</p> 
  </div> 
  <div class="poly"> 
    <img src="./img/poly.png" alt="" style="height: 15px;"> 
  </div> 
 
  <button class="nav__link"><span><img src="./img/book.png" width="110px" height="110px"></span></button> 
  <div class="text"> 
    <h3>+ Booking</h3> 
    <p>Some Text</p> 
  </div> 
  <div class="poly"> 
    <img src="./img/poly.png" alt="" style="height: 15px;"> 
  </div> 
</div>