탭기능 만들며 배우는 for반복문 질문입니다.

for(let i=0;i<querySelectorAll('.tab-button').length;i++){
document.querySelectorAll('.tab-button')[i].addEventListener('click',function(){
 
for(let j=0;j<querySelectorAll('.tab-button').length;j++){
 document.querySelectorAll('.tab-button')[j].classList.remove('orange');
}
 document.querySelectorAll('.tab-button')[i].classList.add('orange');

for(let k=0;k<querySelectorAll('.tab-content').length;k++){
 document.querySelectorAll('.tab-content')[k].classList.remove('show');
}
 document.querySelectorAll('.tab-content')[i].classList.add('show');
});
}


위와 같이 짜보았는데요. 제대로 동작을 하지 않는데, 이유가 뭘까요? ㅠ ㅠ 그리고 위의 변수 j, k를 그냥 i로해도 괜찮을까요?