[SOLVED] Having trouble with multiple JQuery Tabs

Having trouble with multiple JQuery Tabs

I'm rather amateur at JQuery and I'm trying to use multiple JQuery tab containers on one page, but don't want them to effect each other. You'll see from my example what I mean. I know I'm missing something in my JS but can't figure out. I've tried adding various parent and sibling code in the JS, but I can't get anything to make the containers unique. Any help would be much appreciated!

$('ul.tabs li').click(function(){
                var tab_id = $(this).attr('link-tab');

                $('ul.tabs li').removeClass('current');
                $('.tab-content').removeClass('current');

                $(this).addClass('current');
                $("#"+tab_id).addClass('current');
            })

Here the link on CODEPEN

Solution

Change link-tab attr to data-tab attr

<li class="tab-link current" link-tab="tab-3">08:30-09:30</li> to <li class="tab-link current" data-tab="tab-3">08:30-09:30</li>

try

 $(document).ready(function() {
   $('.tab-link').click(function() {
     //find closest div
     div_container = $(this).closest('.container');
     //remove current class from all .tab-link and .tab-content class under closest div container
     div_container.find('.tab-link').removeClass('current');
     div_container.find('.tab-content').removeClass('current');

     //add current class to current click tab and corresponding div
     $(this).addClass('current');
     tab_id = $(this).attr('data-tab');
     $('#' + tab_id).addClass('current');

   });
 });

.container {
  width: 95%;
  margin-top: 30px;
  padding: 8px;
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4)
}
ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.tabs li {
  background: #009a97;
  color: white;
  display: inline-block;
  margin-bottom: 8px;
  padding: 8px;
  cursor: pointer;
  font-weight: bold;
}
ul.tabs li.current {
  background: none;
  color: #222;
  border: none;
}
.tab-content {
  display: none;
  padding-left: 8px;
  padding-top: 10px;
  border-top: 1px solid #009a97
}
.tab-content.current {
  display: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">08:30-09:30</li>
    <li class="tab-link" data-tab="tab-2">Evaluation</li>
  </ul>
  <div id="tab-1" class="tab-content current">
    <div class="togg">
      <p><strong>Presentation</strong>
      </p>

      <p><em>Presenter</em>
        <br>
      </p>
    </div>
  </div>
  <div id="tab-2" class="tab-content">Embedded evaluation</div>
</div>
<div class="container">
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-3">08:30-09:30</li>
    <li class="tab-link" data-tab="tab-4">Evaluation</li>
  </ul>
  <div id="tab-3" class="tab-content current">
    <div class="togg">
      <p><strong>Presentation2</strong>
      </p>

      <p><em>Presenter</em>
        <br>
      </p>
    </div>
  </div>
  <div id="tab-4" class="tab-content">Embedded evaluation</div>
</div>