JQueryによるタブメニュー操作

前提・実現したいこと

クリックしたカテゴリーに応じて、タブメニューの内容を連動させたいです。

発生している問題・エラーメッセージ

下記内容、初期値である春のカテゴリーは表示されるが、夏、秋、冬のカテゴリーをクリックすると冬の表示内容が表示される。

該当のソースコード

--HTML--
<div class="container">
      <ul class="menu">
        <li class="tab tab__is-active">春</li>
        <li class="tab">夏</li>
        <li class="tab">秋</li>
        <li class="tab">冬</li>
      </ul>

      <ul class="contents">
        <li class="content content__is-active">
          <h3 class="content__ttl">春の風物詩</h3>
          <p>トレンチコート</p>
          <p>桜</p>
          <p>入学式</p>
        </li>
        <li class="content">
          <h3 class="content__ttl">夏の風物詩</h3>
          <p>海</p>
          <p>スイカ</p>
          <p>花火</p>
        </li>
        <li class="content">
          <h3 class="content__ttl">秋の風物詩</h3>
          <p>紅葉</p>
          <p>栗</p>
          <p>松茸</p>
        </li>
        <li class="content">
          <h3 class="content__ttl">冬の風物詩</h3>
          <p>雪</p>
          <p>スキー</p>
          <p>マフラー</p>
        </li>
      </ul>
    </div>
--/HTML--

--CSS--
/* common */
body {
  background: rgba(243, 236, 236, 0.9);
}

/* /commmon */

/* Tabmenu */
.container {
  margin: 30px auto;
  width: 500px;
}
.menu {
  width: 100%;
  list-style-type: none;
  display: flex;
}
.tab {
  background: #fff;
  border-radius: 5px 5px 0 0;
  display: inline-block;
  font-size: 30px;
  margin-right: 10px;
  opacity: 0.5;
  justify-content: center;
  text-align: center;
  width: 100px;
  padding: 8px 10px 8px 0;
  cursor: pointer;
}
.tab__is-active {
  opacity: 1;
}
.contents {
  width: 100%;
}
.content {
  display: none;
  width: 100%;
  height: 300px;
  padding: 16px;
  background-color: #fff;
}
.content__ttl {
  font-size: 20px;
  margin-bottom: 30px;
}
.content p {
  border-bottom: 2px solid rgba(243, 236, 236, 0.9);
  padding-bottom: 3px;
  margin-bottom: 10px;
}
.content.content__is-active {
  display: block;
}
/* /Tabmenu */
--/CSS--

--JQuery--
$(function () {
  // index() : index番号を取得する
  // eq() :index番号を使って特定の要素を取得する
  $('.tab').click(() => {
    const $number = $('.tab').index(this);
    $('.tab').removeClass('tab__is-active');
    $(this).addClass('tab__is-active');
    $('.content')
      .removeClass('content__is-active')
      .eq($number)
      .addClass('content__is-active');
  });
});
--/JQuery--