JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>


  <div class="my-button">Button 1</div>

  <div class="my-button">Button 2</div>


  <div class="my-button">Button 3</div>
  <div class="my-button">Button 4</div>

  <div class="my-button">Button 5</div>
  <div class="my-button">Button 6</div>
  <textarea onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white');"></textarea>


</body>

</html>

CSS

.selected {
  background: darkred;
}

JavaScript

(function() {

  var myButtons = document.querySelectorAll('.my-button');

  for (var i = 0; i < myButtons.length; i++) { 
    var button = myButtons[i]; 
    button.addEventListener('click', function(event) { 
      for (var i = 0; i < myButtons.length; i++) {
 						 var button2 = myButtons[i];
              button2.classList.remove("selected");
      } 
            this.classList.toggle("selected");  
    });

  }

})();