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

var active = $('.block__item--active')
  active.click(function(e){
    console.log(active.index(this))
    $('.text').text(active.index(this))
  })