JSFiddle - React, Tailwind, and code Playground

by Oleg Serebryakov

HTML

<div class="parent">
  <div class="child" data_num="1"></div>
  <div class="child" data_num="2"></div>
  <div class="child" data_num="3"></div>
  <div class="child" data_num="4"></div>
  <div class="child" data_num="5"></div>
</div>

CSS

.parent {
  width: 80%;
  display: flex;
  justify-content: space-around;
}

.child {
  width: 90px;
  height: 90px;
  border: 1px solid #000;
}

JavaScript

$(function(){
	$('.child').on('click', function (e) {
  	e.preventDefault();
    
    let num = parseInt($(this).attr('data_num'));
    
    //alert(num);
    $('.child').css('background', '#fff');
  	$('.child:nth-child(-n+' + num + ')').css('background', '#eee');
  })
});