JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span id="spA" onclick="toggleFx('spA')">A</span>
  <span id="spB" onclick="toggleFx('spB')">B</span>
  <span id="spC" onclick="toggleFx('spC')">C</span>
  <span id="spD" onclick="toggleFx('spD')">D</span>
</div>

CSS

div {
  display: flex;
  flex-flow: column;
}

span {
  animation-name: pulse_active;
}

span.pulse {
	color: #f00;
	animation: pulse_active 1.5s ease-in infinite;
}

span.pulse_invert {
  color: #00f;
  animation: pulse_inverted 3s ease-in infinite;
}

@keyframes pulse_active {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0.66;
	}
	100% {
		opacity: 0;
	}
}

@keyframes pulse_inverted {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.33;
	}
	100% {
		opacity: 1;
	}
}

JavaScript

let pulseNormal = {};
let pulseInvert = {};

function toggleFx(spanID) {

	let spanTarget = document.getElementById(spanID);
  
  // shift setting
  if (spanID in pulseInvert) {
  console.log('y');
  console.log(Object.keys(pulseInvert));
  	delete pulseInvert[spanID]
  console.log(Object.keys(pulseInvert));
  } else if (spanID in pulseNormal) {
  	pulseInvert[spanID] = true;
  	delete pulseNormal[spanID];
  } else {
  	pulseNormal[spanID] = true
  }
  
  // update display
  for (let sp of 'ABCD') {
  	let span = document.getElementById(`sp${sp}`);
    
    // clear any prev animation
		span.classList.remove('pulse');		
    span.classList.remove('pulse_invert');
    
    // add/re-add animation as needed
  	if (`sp${sp}` in pulseNormal) {				
    	span.classList.add('pulse');
    } else if (`sp${sp}` in pulseInvert) {
    	span.classList.add('pulse_invert');
    }
  }

}