JSFiddle - React, Tailwind, and code Playground

by Kriti

HTML

<ul>
  <li class="item1 item2">
    <a href="" id="selector">Test1</a>
  </li>
</ul>


  <div class="content">
      <input id="search" name="search" class="search-input" type="search" placeholder="Search">
    </div>

JavaScript

$(document).ready(function(){
    $( "li" ).each(function(){
if ($("li").hasClass("item1") && $("li").hasClass("item2") && 
    $("li").hasClass("item3")){
  $(".content").removeClass("2 3 4").addClass("1");
} else if ($("li").hasClass("item1") && $("li").hasClass("item2")) { 
  $(".content").removeClass("1 3 4").addClass("2");
} else if ($("li").hasClass("item1") && $("li").hasClass("item3")) {
  $(".content").removeClass("1 2 4").addClass("3");
} else if (!$("li").hasClass("item2") && !$("li").hasClass("item3")) {
  $(".content").removeClass("1 2 3").addClass("4");
} else {
  $(".content").removeClass("1 2 3 4");
}
    });    
});