반복문2 확장성 질문드려요

[이다원]

안녕하세요. 
반복문 확장성 관련 문제입니다. 탭이 4개가 늘어나면 4개로 구현되고 5개가 늘어나면 5개가 구현되도록 하는 코드요. 
제이쿼리로 해봤고 생 자바스크립트도 해봤는데요. 제가 해본 코드는 문제는 
탭이 하나 추가될때마다 맨처음 모든 클래스 제거를 일일이 추가해야한다는점인데요. 
document.querySelectorAll('.tab-button')[0].classList.remove('orange');
document.querySelectorAll('.tab-button')[1].classList.remove('orange');
document.querySelectorAll('.tab-button')[2].classList.remove('orange');
document.querySelectorAll('.tab-button')[3].classList.remove('orange');
이런식으로 탭 하나 생길때마다 하나씩 더 추가를 해줘야하는데 추가하는 불편함 없이 코드도 만들수 있나요?

전체 코드 : 자꾸 잘려서 이미지로 올립니다.. ㅠㅠ 

[codingapple]

그것도 비슷한코드많은데 반복문 쓰면 될듯요 
아니면 이미 .orange부여된 요소 찾아서 orange클래스명 제거하라고 하면 한줄 컷일듯요

[글쓴이]

글