同一ページ内に複数のタブ切り替えをjQueryで実装したい

以下コードで、複数のタブを同じページに設置した際、別々に動かすには、どういう記述に変えたらいいでしょうか？

同ページに同じHTMLで複数のタブを設置したところ、1つめのタブのみ反応して、2つめのタブがうまく動きません。

シンプルな解決策があればご教授頂けると幸いです。

html
1【1つめのタブ】
2
3<div class="tab-group">
4    <div class="tab is-active">Tab-A</div>
5    <div class="tab">Tab-B</div>
6    <div class="tab">Tab-C</div>
7</div>
8<div class="panel-group">
9    <div class="panel is-show">Content-A</div>
10    <div class="panel">Content-B</div>
11    <div class="panel">Content-C</div>
12</div>
13
14【2つめのタブ】
15
16<div class="tab-group">
17    <div class="tab is-active">Tab-A</div>
18    <div class="tab">Tab-B</div>
19    <div class="tab">Tab-C</div>
20</div>
21<div class="panel-group">
22    <div class="panel is-show">Content-A</div>
23    <div class="panel">Content-B</div>
24    <div class="panel">Content-C</div>
25</div>

js
1jQuery(function($){
2	$('.tab').click(function(){
3		$('.is-active').removeClass('is-active');
4		$(this).addClass('is-active');
5		$('.is-show').removeClass('is-show');
6		const index = $(this).index();
7		$('.panel').eq(index).addClass('is-show');
8	});
9});

行動規範の内容に同意します

回答1件

ベストアンサー

1つめのタブと2つめのタブは独立しているものということでよいですね？

javascript
1<style>
2.is-active{color:red}
3.panel:not(.is-show){display:none}
4</style>
5<script>
6$(function(){
7  $('.tab').on('click',function(){
8    var idx=$('.tab').index(this);
9    $(this).addClass('is-active').siblings('.tab').removeClass('is-active');
10    $(this).closest('.tab-group').next('.panel-group').find('.panel').removeClass('is-show');
11    $('.panel').eq(idx).addClass('is-show');
12  });
13});
14</script>
15<div class="tab-group">
16    <div class="tab is-active">Tab-A</div>
17    <div class="tab">Tab-B</div>
18    <div class="tab">Tab-C</div>
19</div>
20<div class="panel-group">
21    <div class="panel is-show">Content-A</div>
22    <div class="panel">Content-B</div>
23    <div class="panel">Content-C</div>
24</div>
25
26<div class="tab-group">
27    <div class="tab is-active">Tab-A</div>
28    <div class="tab">Tab-B</div>
29    <div class="tab">Tab-C</div>
30</div>
31<div class="panel-group">
32    <div class="panel is-show">Content-A</div>
33    <div class="panel">Content-B</div>
34    <div class="panel">Content-C</div>
35</div>