탭기능 만들며 배우는 for 반복문 2

선생님

var one =document.querySelectorAll('.tab-button');
var two =document.querySelectorAll('.tab-content');
for(let i = 0; i<3;i++){
one[i].addEventListener('click',function(){
    one.classList.remove('orange');
    one[i].classList.add('orange');
});
}
제이쿼리를 안썼을때 이렇게 코드를짜면 동작을 안하는데
뭐가 문제인가요~?

작동만 해라! 하고 아래처럼 코드를짰는데 이러면 반복문을 쓸 이유가 없지않나?싶어서요ㅠㅠ
쿼리셀렉터올을 쓰면 다 선택되어야 하는것 아닌가요~?
for(let i = 0; i<3;i++){
one[i].addEventListener('click',function(){
    one[i].classList.add('orange');
    if(i==0){
        one[1].classList.remove('orange');
        one[2].classList.remove('orange');
    }
    if(i==1){
        one[0].classList.remove('orange');
        one[2].classList.remove('orange');
    }
    if(i==2){
        one[0].classList.remove('orange');
        one[1].classList.remove('orange');
    }
    two[i].classList.add('show');
    if(i==0){
        two[1].classList.remove('show');
        two[2].classList.remove('show');
    }
    if(i==1){
        two[0].classList.remove('show');
        two[2].classList.remove('show');
    }
    if(i==2){
        two[0].classList.remove('show');
        two[1].classList.remove('show');
    }
});
}
제이쿼리 안쓰고 자바스크립트로 동일한 클래스를 모두 선택하는 기능이 무엇인지 궁금해요