탭기능 만들며 배우는 for문(2) 강좌에서 질문드립니다.

for (var i = 0; i < 3; i++){

  $('.tab-button').eq(i).on('click', function(){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(i).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(i).addClass('show');
  })

이것을 제이쿼리를 사용안하고 일반적으로 표현하려면
for (let i = 0; i < 3; i++) {
  document.querySelectorAll('.tab-button')[i].addEventListener('click', function(){
    document.querySelectorAll('.tab-button')[i].classList.remove('orange');
    document.querySelectorAll('.tab-button')[i+1].classList.remove('orange');
    document.querySelectorAll('.tab-button')[i+2].classList.remove('orange');
    document.querySelectorAll('.tab-button')[i].classList.add('orange');
    document.querySelectorAll('.tab-content')[i].classList.remove('show');
    document.querySelectorAll('.tab-content')[i+1].classList.remove('show');
    document.querySelectorAll('.tab-content')[i+2].classList.remove('show');
    document.querySelectorAll('.tab-content')[i].classList.add('show');

이렇게 코드를 작성하면 작동이 안되는데 querySelectorAll 뒤에 인덱스를 꼭 붙여야만 하는건가요?
구글에 검색해보니 인덱스를 안 붙이고 사용하는 거 같은데 인덱스를 안 붙이면 작동을 안합니다.
물론 제가 올린 코드도 작동을 안하구요