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 current_active = this.get_current_active('.block__item--active');
    
    $('.text').text(current_active);
  })
  
HTMLElement.prototype.get_current_active = function(selector) {
	var element = this;
  var collection = $(this).parent().find(selector);
 	var result = null;
  
  collection.each(function(i) {
  	if(this == element) {
    	result = i;
    }
  });
  
  return result;
};