JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper1 wrapper-common">
  <div class="wrapper1-item active">1</div>
  <div class="wrapper1-item">2</div>
  <div class="wrapper1-item">3</div>
  <div class="wrapper1-item">4</div>
  <div class="wrapper1-item">5</div>
</div>

<div class="wrapper2 wrapper-common">
  <div class="wrapper2-item active">1</div>
  <div class="wrapper2-item">2</div>
  <div class="wrapper2-item">3</div>
  <div class="wrapper2-item">4</div>
  <div class="wrapper2-item">5</div>
</div>

CSS

.active{color:red}

JavaScript

const handleClick = (e) => {
	const parent = e.target.parentElement;
  if (!parent.classList.contains('wrapper-common')) {
  	return;
  }
  
	const index = [...parent.children].findIndex((el) => el === e.target);
  if (index === -1) {
  	return;
  }
  
  	const children1 = document.querySelector('.wrapper1').children;
  	[...children1]
    	.forEach((el) => el.classList.remove('active'));
      
    children1[index].classList.add('active');
    
  	const children2 = document.querySelector('.wrapper2').children;
  	[...children2]
    	.forEach((el) => el.classList.remove('active'));
      
    children2[index].classList.add('active');
};
[...document.querySelectorAll('.wrapper-common')]
	.forEach((el) => el.addEventListener('click', handleClick));