Ошибка в коде JS переключающем вкладки

Для страницы необходимо сделать вкладки. Своих знаний, чтобы сделать это мне не хватает пока, поэтому взял чужой код. В примере он работает.

Проблема: при клике на вкладку нужный див не показывается, ни диву в табом, ни диву с контентом не присваивается класс active.

В консоли дает ошибку: tab is not defined.

Пожалуйста, помогите найти ошибку! Заранее всем спасибо!

  <div class="servicesTabs">
    <div class="tabs">
      <div class="tabItem">Wedding Planner</div>
      <div class="tabItem">Photographer</div>
      <div class="tabItem">Deejay</div>
      <div class="tabItem">Animations</div>
    </div>
    <div class="content">
      <div class="contentItem">
        <div class="subTitle"><h3>Wedding Planner</h3>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        </div>
        <div><img src="img/intro_01.jpg" class="image" alt=""></div>
      </div>
      <div class="contentItem">
        <div class="subTitle"><h3>Photographer</h3>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        </div>
        <div><img src="img/intro_02.jpg" class="image" alt=""></div>
      </div>
      <div class="contentItem">
        <div class="subTitle"><h3>Photographer</h3>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        </div>
        <div><img src="img/intro_02.jpg" class="image" alt=""></div>
      </div>
      <div class="contentItem">
        <div class="subTitle"><h3>Photographer</h3>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        </div>
        <div><img src="img/intro_02.jpg" class="image" alt=""></div>
      </div>
    </div>
  </div>

    .servicesTabs {
    overflow: hidden;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
}
.tabItem {
    padding: 0 0 10px 0;
    font-family: "Jaapokkiregular", serif;
    font-size: 18px;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    flex-basis: 140px;
    text-align: center;
}
.tabItem:hover,
.tabItem.active {
    border-bottom: 1px solid red;
}
.content {
    margin-top: 30px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: start;
    height: 700PX;
    width: 100%;
}
.contentItem {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    width: 99.5%;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    padding-top: 10px;
    opacity: 0;
    transform: translateX(100px);
}
.contentItem.active {
    transition: all 250ms;
    opacity: 1;
    transform: translateX(0);
    position: static;
}

    const tabs = document.querySelectorAll('.tabItem');
const contents = document.querySelectorAll('.contentItem');

console.log(contents);

tabs.forEach((tab, index) => {
    tab.onclick = () => {
        changeTab(index)
    };
});

function changeTab(index) {
    for (let tab of tabs) {
        tab.classList.remove('active');
    }
    tab[index].classList.add('active');

    for (let el of contents) {
        el.classList.remove('active');
    }
    contents[index].classList.add('active');
};