클릭 이벤트 질문입니다.

현재 활성화된 인덱스를 기준으로 세팅하시면, 구조가 복잡해져도 컨트롤 하기가 좋답니다.
아래와 같이 해보세요^^

const btnGroup = document.querySelector(".btn-group");
      const btns = document.querySelectorAll(".btn");
      const boxes = document.querySelectorAll(".box");

	  let currentIndex = 0;

      //data-index 설정
      for (let i = 0; i < btns.length; i++) {
        btns[i].dataset.index = i;
        boxes[i].dataset.index = i;
      }

	  function activate(index) {
		currentIndex = index;
		btns[currentIndex].classList.add('clicked');
		boxes[currentIndex].classList.add('clicked');
	  }

	  function inactivate() {
		btns[currentIndex].classList.remove('clicked');
		boxes[currentIndex].classList.remove('clicked');
	  }

      const btnClickHandler = (e) => {
        const targetElem = e.target;
        const targetIdx = targetElem.dataset.index;

		inactivate();
		activate(targetIdx);
      };
      btnGroup.addEventListener("click", btnClickHandler);