JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="tabs" class="control">
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
    <li><a href="#tab3">Tab3</a></li>
    <li><a href="#tab4">Tab4</a></li>
</ul>


<ul id="tabs" class="markers">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

CSS

.active { background: red; }

    li {width: 100px; padding: 20px; border: 2px blue; }

JavaScript

$(document).ready(function() {

  $("ul.control li, ul.markers li").click(function(e) {
     var that = $(this);
      that.siblings('active').removeClass('active');
      //that.addClass('active');
      
  });

});