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){
    var index = $('.block__item--active', this.parentNode).index(this)
    $('.text').text(index)
  })