JSFiddle - React, Tailwind, and code Playground

by Anwar Hussain

HTML

<h2>Group 1</h2>

<ul id="group-1">
    <li class="active">Trigar 1</li>
    <li>Trigar 2</li>
    <li>Trigar 3</li>
    <li>Trigar 4</li>
    <li>Trigar 5</li>
</ul>

<h2>Group 2</h2>

<ul id="group-2">
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

CSS

.active {
    color: red;
}

JavaScript

$("#group-1").click(function(){
    $("#group-1").children("li").each(function(index){
       if($(this).hasClass("active")) {
          $("#group-2 li:nth-child("+(index+1)+")").addClass("active");
       }
    });
});