JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<style>

.variantClass { background: black; color: white; padding: 30px;}
</style>
<div class='buttons'>
<button class="variantClass">
Button 
</button>
<button class="variantClass">
Button 
</button>
<button class="variantClass">
Button 
</button>
<button class="variantClass">
Button 
</button>
<button class="variantClass">
Button 
</button>
<button class="variantClass">
Button 
</button>
</div>

JavaScript

var buttonSelector = document.querySelectorAll('button.variantClass');
buttonSelector.forEach(function (el){
  el.addEventListener("click", function(ev){
    const clickedButton = ev.target
    buttonSelector.forEach(button => button.style.opacity = '0.5')
    clickedButton.style.opacity = 1
  })
});