JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>item list 1</li>
  <li>item list 2</li>
  <li>item list 3</li>
</ul>

<div class="parent">
  <div class="item">item block 1</div>
  <div class="item">item block 2</div>
  <div class="item">item block 3</div>
</div>

CSS

.item {
  display: none;
}
.item.show {
  display: block;
}

JavaScript

function visibleGroup(i) {
	alert(i)
 	$('.item').eq(i).addClass('show');
}

$('li').on('click', function(){
	var i = $(this).index();
  $('.item').removeClass('show');
  $('.item').eq(i).addClass('show');
  visibleGroup(i);
});