JSFiddle - React, Tailwind, and code Playground

by Daniil Khanin

HTML

<ul class='smallBox'>
    
    <li></li>
    
     <li></li>
    
     <li></li>
    
    
    
</ul>

<ul class='smallBoxTwo'>
    
    <li></li>
    
     <li></li>
    
     <li></li>
    
    
    
</ul>

CSS

.smallBox>li{
    
    display:block;
    
    width:40px;
    
    height:40px;
    
    margin-bottom:10px;
    
    background-color:orange;
    
    
}

.smallBoxTwo>li{
    
    display:block;
    
    width:40px;
    
    height:40px;
    
    margin-bottom:10px;
    
    background-color:red;
    
    
}

.lol{
    
    background-color:blue!important;
}

JavaScript

var index=0;

$('.smallBox').on('click','li',function(){
                 
                 index = $('.smallBox>li').index(this);
    
    $('.smallBoxTwo>li:eq(index)').addClass('lol');
                 
                  })