2つの方法でタブ切り替えをする方法

前提・実現したいこと

左側のタブを押した時に該当タブに画面切り替え、次へボタンをクリック時に次のタブページを表示させたいです。

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

タブクリック時に該当の画面への切り替え、タブAの次へボタンを押した時にタブBが表示されますがそれ以外のタブの次へボタンは反応がありません。
検証画面の

HTML

html
1      <div class="row">
2
3      <ul class="tab-group col-2">
4        <li class="tab is-active">Tab-A</li>
5        <li class="tab">Tab-B</li>
6        <li class="tab">Tab-C</li>
7        <li class="tab">Tab-D</li>
8        <li class="tab">Tab-E</li>
9        <li class="tab">Tab-F</li>
10        <li class="tab">Tab-G</li>
11      </ul>
12
13      <!--タブを切り替えて表示するコンテンツ-->
14      <div class="panel-group">
15          <!-- パネル1 -->
16          <div class="panel is-show">Content-A
17            <div class=" col-5">
18
19              <button id="next" type="button" name="button">次へ</button>
20            </div>
21
22          <div class="col-5">
23            右コンテンツ1
24          </div>
25
26          </div>
27
28          <!-- パネル2 -->
29          <div class="panel col-10">Content-B
30            <div class="col-5">
31
32              <button id="next" type="button" name="button">次へ</button>
33            </div>
34
35            <div class="col-5">
36              右コンテンツ2
37            </div>
38          </div>
39
40          <!-- パネル3 -->
41          <div class="panel col-10">Content-C
42            <div class="col-5">
43
44              <button id="next" type="button" name="button">次へ</button>
45            </div>
46
47            <div class="col-5">
48              右コンテンツ3
49            </div>
50          </div>
51
52          <!-- パネル4 -->
53          <div class="panel col-10">Content-D
54            <div class="col-5">
55
56              <button id="next" type="button" name="button">次へ</button>
57            </div>
58
59            <div class="col-5">
60              右コンテンツ4
61            </div>
62          </div>
63
64          <!-- パネル5 -->
65          <div class="panel col-10">Content-E
66            <div class="col-5">
67
68              <button id="next" type="button" name="button">次へ</button>
69            </div>
70
71            <div class="col-5">
72              右コンテンツ5
73            </div>
74          </div>
75
76          <!-- パネル6 -->
77          <div class="panel col-10">Content-F
78            <div class="col-5">
79
80              <button id="next" type="button" name="button">次へ</button>
81            </div>
82
83            <div class="col-5">
84              右コンテンツ6
85            </div>
86          </div>
87
88          <!-- パネル7 -->
89          <div class="panel col-10">Content-G
90            <div class="col-5">
91
92              <button id="next" type="button" name="button">次へ</button>
93            </div>
94
95            <div class="col-5">
96              右コンテンツ7
97            </div>
98          </div>
99
100      </div><!--panel-group-->
101
102    </div>
103

CSS

css
1li {
2  list-style: none;
3}
4.tab-group{
5    justify-content: center;
6}
7.tab{
8    flex-grow: 1;
9    padding:5px;
10    list-style:none;
11    border:solid 1px #CCC;
12    text-align:center;
13    cursor:pointer;
14}
15.panel-group{
16    height:100px;
17    border:solid 1px #CCC;
18    border-top:none;
19    background:#eee;
20}
21.panel{
22    display:none;
23}
24.tab.is-active{
25    background:#F00;
26    color:#FFF;
27    transition: all 0.2s ease-out;
28}
29.panel.is-show{
30    display:block;
31}
32
33
34

jquery

jquery
1
2
3$(function(){
4    $('.tab').click(function(){
5
6        $('.is-active').removeClass('is-active');
7        $(this).addClass('is-active');
8        $('.is-show').removeClass('is-show');
9        var index = $(this).index();
10        console.log(index);
11        $('.panel').eq(index).addClass('is-show');
12    });
13    $('#next').click(function(){
14      $('.is-active').removeClass('is-active');
15      $(this).addClass('is-active');
16      $('.is-show').removeClass('is-show');
17      var num = 0;
18      num++;
19      $('.panel').eq(num).toggleClass('is-show');
20      $('.tab').eq(num).toggleClass('is-active');
21
22    });
23});

試したこと

alert()でクリックが認識されているか確かめましたがやはりタブA時の表示画面のボタンしかアラートが出ませんでした。

補足情報（FW/ツールのバージョンなど）

タブ切り替えのサンプルを使わせていただきeqとindexでボタンクリックでもできるのではと思ったのですが、eq()とindex()の理解が浅いまま使ったため沼にはまってしまいました。ご教示いただけますと幸いです。
各idを付けて表示する方法を採用しなかったのは、ページによってタブの数が増えたり減ったりするサービスを作る為です。