탭기능 for 반복문2 자바스크립트로만 코드 짤때 질문

// for문 사용
for(let i = 0; i < tabButton.length; i++) {
  tabButton[i].addEventListener('click', function() {
    tabButton1.classList.remove('orange');
    tabContent1.classList.remove('show');
    tabButton2.classList.remove('orange');
    tabContent2.classList.remove('show');
    tabButton3.classList.remove('orange');
    tabContent3.classList.remove('show');
    tabButton[i].classList.toggle('orange');
    tabContent[i].classList.toggle('show');
  });
}

for문으로 버튼과 컨텐츠 1,2,3의 클래스를 각 각 삭제하고 
클래스를 새로 붙여주어야 하는 버튼만 반복문의 i로 사용하여 구현하였는데,
위의 코드를 아래처럼 작성해도 정상 작동하는데 for문을 2번써도 괜찮은지요?
그리고 현업에서도 for문을 2번 쓰는 경우가 있나요?
답변 부탁드립니다.

for(let i = 0; i < tabButton.length; i++) {
  tabButton[i].addEventListener('click', function() {
    for(let j = 0; j < tabButton.length; j++) {
      tabButton[j].classList.remove('orange');
      tabContent[j].classList.remove('show');
    }
    tabButton[i].classList.toggle('orange');
    tabContent[i].classList.toggle('show');
  });
}