Targeting One Tab Set in Multiple Tab Sets

I have some JQuery that controls the open and close of tabs. It works great - until I have multiple sets of tabs. On click functionality impacts all the sets of tabs. I want to be able to isolate the functionality to the set of tabs that are being interacted with. How do I do this efficiently?

Each tab has a unique ID associated with it

data-tab="tab-">

<ul class="tabs list fa-ul ml2 pl0 tf">
  <li class="lh-copy pv2 ba bl-0 bt-0 br-0 b--dotted b--black-30" data-tab="tab-21">
    <a class="link pointer blue hover-teal no-underline d tab-hover-fix tab-link" target="_blank">
      <span class="fa-li"><i class="fas fa-caret-down blue"></i></span>TAB ONE</a>
    <div id="tab-21" class="tab-content w-100-ns pt2 pb2 dn-ns dn">CONTENT GOES HERE</div>
  </li>
  <li class="lh-copy pv2 ba bl-0 bt-0 br-0 b--dotted b--black-30 active" data-tab="tab-22">
    <a class="link pointer blue hover-teal no-underline d tab-hover-fix tab-link" target="_blank">
      <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>TAB TWO</a>
    <div id="tab-22" class="tab-content w-100-ns pt2 pb2 dn-ns db">
      CONTENT TWO GOES HERE
    </div>
  </li>
</ul>

$('ul.tabs li').click(function() {
  var tab_id = $(this).attr('data-tab');
  var icon = $(this).find('span i');

  //Remove on all list items
  $('ul.tabs li').removeClass('active');
  $('ul.tabs li span i').removeClass('teal rm-90');

  //Remove on all div items
  $('.tab-content').removeClass('db');
  $('.tab-content').addClass('dn');

  //Add on current list item
  $(icon).addClass('teal rm-90');
  $(this).addClass('active');

  //Add on current div item
  $('ul.tabs').find("#" + tab_id).removeClass('dn');
  $('div.tabs').find("#" + tab_id).removeClass('dn');
  $('ul.tabs').find("#" + tab_id).addClass('db');
  $('div.tabs').find("#" + tab_id).addClass('db');
})

from Targeting One Tab Set in Multiple Tab Sets