Having Multiple Tabs on the same page with jQuery

Question

Having some problems with very basic JQ tabs

I need to have 3 or 4 of the same tabs on the same page. I got this JQ code and it works for one tab although when I click on the other tabs the first tabs content change only.

Can someone please show me a work around to have this implemented.

This is the code im using

$(document).ready(function(){
$('ul.tabs').each(function(){
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));

$links.not($active).each(function () {
    $($(this).attr('href')).hide();

});

// Bind the click event handler
       $(this).on('click', 'a', function(e){
    $active.removeClass('active');
    $content.hide();
    $active = $(this);
    $content = $($(this).attr('href'));
    $active.addClass('active');
    $content.show();
    e.preventDefault();
  });
});

});

This is the HTML

 <div class="bluetabs"> 
  <ul class='tabs'>
    <li><a href='#tab1'>WEB DESIGN</a></li>
    <li><a href='#tab2'>GRAPHIC DESIGN</a></li>
  </ul>
  <div class="bluetabContent"> 
      <div id='tab1'>
       ...
      </div>
      <div id='tab2'>
      ...
      </div>

  </div>
</div><!-- BLUE TABS -->

<div class="greentabs"> 
  <ul class='tabs'>
    <li><a href='#tab1'>WEB DESIGN</a></li>
    <li><a href='#tab2'>GRAPHIC DESIGN</a></li>
  </ul>
  <div class="bluetabContent"> 
      <div id='tab1'>
       ...
      </div>
      <div id='tab2'>
      ...
      </div>

  </div>
</div><!-- GREEN TABS -->

<div class="redtabs"> 
  <ul class='tabs'>
    <li><a href='#tab1'>WEB DESIGN</a></li>
    <li><a href='#tab2'>GRAPHIC DESIGN</a></li>
  </ul>
  <div class="bluetabContent"> 
      <div id='tab1'>
       ...
      </div>
      <div id='tab2'>
      ...
      </div>

  </div>
</div><!-- RED TABS -->

Answer 1

Keep your ID attributes Unique in a html document e.g Ref.

So in short , changing your tab ids to tab1, tab2, tab3 and tab4 will fix the issue.

Answer 2

you can you Jquery tabs, it's can used multipe in one and work without unique class can be the same class for all your table. https://jqueryui.com/tabs/

check this and copy multiple time tabs but change the ID to class and also in jquery will work.