JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <div class="block__item"></div>
  <div class="block__item block__item--active"></div>
  <div class="block__item"></div>
  <div class="block__item block__item--active"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item block__item--active"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

<div class="block">
  <div class="block__item block__item--active"></div>
  <div class="block__item"></div>
  <div class="block__item block__item--active"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item block__item--active"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item block__item--active"></div>
</div>

<div class="block">
  <div class="block__item"></div>
  <div class="block__item block__item--active"></div>
  <div class="block__item"></div>
  <div class="block__item block__item--active"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item block__item--active"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

<p class="text">text</p>

CSS

.block {
  display: flex;
  margin: 5px;
}

.block__item {
  width: 40px;
  height: 40px;
  background: red;
}

.block__item--active {
  background: blue;
}

JavaScript

$('.block__item--active').click(function(e){

    console.log($(this).index('.block__item--active'))
    $('.text').text($(this).index('.block__item--active'))
  })