JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div class="parent">
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
</div>

CSS

p {margin:0;}
p:hover, p[data-active] {
background:red;
}

JavaScript

const allPs = document.querySelectorAll(".parent p");
allPs.forEach(p => addListeners(p));

function addListeners(p){
  p.addEventListener("mouseover", select);
  p.addEventListener("mouseout", deselect);
}

function select(){
  document.querySelectorAll("p."+this.className)
  .forEach(p => p.setAttribute("data-active",""));
}

function deselect(){
  document.querySelectorAll("p."+this.className)
  .forEach(p => p.removeAttribute("data-active"));
}