JSFiddle - React, Tailwind, and code Playground

by lutskboy

HTML

<h2>Вариант 1</h2>
<div class="v1">
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
</div>

<h2>Вариант 2</h2>
<div class="v2">
	<div class="iw">
		<div class="ii"></div>
	</div>
	<div class="iw">
		<div class="ii"></div>
	</div>
	<div class="iw">
		<div class="ii"></div>
	</div>
	<div class="iw">
		<div class="ii"></div>
	</div>
</div>

<h2>Вариант 3</h2>
<div class="v3">
  <div></div>
  <span></span>
	<div class="iw">
		<div class="iii"></div>
	</div>
	<div class="iw">
		<div class="iii"></div>
	</div>
	<div class="iw">
		<div class="iii"></div>
	</div>
	<div class="iw">
		<div class="iii"></div>
	</div>
</div>

CSS

.i, .ii, .iii {
  height: 30px;
  background: #f9ecec;
  margin: 0 0 5px;
}

JavaScript

$(function(){

	$('.i').click(function(){
  		var t = $(this);
      index = t.index();
      t.text(index);
  });
  
	$('.ii').click(function(){
  		var t = $(this);
      index = t.parent().index();
      t.text(index);
  });
  
  	$('.iii').click(function(){
  		var t = $(this);
      index = t.parent().index();
      t.text(index);
  });
});