JQuery・タブメニューを複数設置した場合に独立で動作させる方法

前提・実現したいこと

JQuery初心者です。
以下のサイトを参考にタブメニューを自分のサイトに実装しました。
https://kodocode.net/design-css-tab/
２項の５個目のタブメニュー（LAVA LAMP MULTIPLE TABS）
タブをクリックすると、タブ下部の線が移動しタブが切り替わる作りになっています。

上記タブメニューだと、一つのページに一つのタブメニューしか実装できないことがわかりました。
そこで複数設置したい私は初心者ながら、以下のことを実施してみました。

IDが付与されていた線を、クラス指定で動くようにScript、CSSを変更。
リスト複数のタブメニューを設置した場合、一つ目のタブメニュー以外はタブボタンを押さないと中身が表示されない。→表示されるように修正。

実現したいことは
タブメニューを２つ設置した場合、どちらかのタブメニューボタンを押すと、どちらのタブメニューも同時に動作してしまうので、それを独立して動作するようにしたいです。
３つ４つでも独立に動作させたいです。

いろいろ調べてみましたが、どうしても修正方法がわかりませんでした。
お時間ございましたら、是非ご教授ください。

該当のソースコード

タブメニュー２つ分

<div class='tabs'>
  <div class='tab-buttons'>
    <span class='content1'></span>
    <span class='content2'></span>
    <span class='content3'></span>
    <div class='content1 lamp'></div>
  </div>
  <div class='tab-content'>
    <div class='content1'></div>
    <div class='content2'></div>
    <div class='content3'></div>
　</div>
  <div class='credit'></div>
</div>

<div class='tabs'>
  <div class='tab-buttons'>
    <span class='content1'></span>
    <span class='content2'></span>
    <span class='content3'></span>
    <div class='content1 lamp'></div>
  </div>
  <div class='tab-content'>
    <div class='content1'></div>
    <div class='content2'></div>
    <div class='content3'></div>
　</div>
  <div class='credit'></div>
</div>

CSS

.tabs{
  margin:2em auto;
  position:relative;
}
.tab-buttons span{
  color:#333;
  background:#eee;
  cursor:pointer;
  border-bottom:2px solid #ddd;
  display:block;
  width:25%;
  float:left;
  text-align:center;
  line-height:40px;
}
.tab-content{
  border-bottom:3px solid #ddd;
  padding:.5em;
  background:#eee;
  display:inline-block;
  color:#333;
  width: 100%;
}
.lamp{
  width:25%;
  height:2px;
  background:#333;
  display:block;
  position:absolute;
  top:40px;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
.lamp.content1{
  left:0;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
.lamp.content2{
  left:25%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
.lamp.content3{
  left:50%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
.lamp.content4{
  left:75%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}

<script>
$('.tab-content>div').hide();
$('.tab-content>div:first-child').slideDown();
  $('.tab-buttons span').click(function(){
    var thisclass=$(this).attr('class');
    $('.lamp').removeClass().addClass('lamp').addClass(thisclass);
    $('.tab-content>div').each(function(){
      if($(this).hasClass(thisclass)){
        $(this).fadeIn(800);
      }
      else{
        $(this).hide();
      }
    });
  });
</script>

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

回答1件

ベストアンサー

まず複数必要なので、HTMLのidをclassにします。

html
1<div id='lamp' class='content1'></div>
2↓
3<div class='lamp content1'></div>
4```
5合わせてCSSも`#lamp`の部分をすべて`.lamp`へ変更します。
6```css
7#lamp
8↓
9.lamp
10```
11最後にjQueryを次のようにすればできます。`var $tabs`としてクリックしたタブのグループを分けることで、クリックしたタブだけが反応するようになっています。
12```jQuery
13$('.tab-content>div').hide();
14$('.content1').slideDown(); // 変更
15  $('.tab-buttons span').click(function(){
16    var thisclass=$(this).attr('class');
17    var $tabs=$(this).closest('.tabs'); // 追加
18    var $lamp=$tabs.find('.lamp'); // 追加
19    $lamp.removeClass().addClass('lamp').addClass(thisclass); // 変更
20    $tabs.find('.tab-content>div').each(function(){ // 変更
21      if($(this).hasClass(thisclass)){
22        $(this).fadeIn(800);
23      }
24      else{
25        $(this).hide();
26      }
27    });
28  });
29```