JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
  <p>change my color1</p>
</div>
<div class="test">
  <p>change my color2</p>
</div>
<div class="test">
  <p>change my color3</p>
</div>
<div class="test">
  <p>change my color4</p>
</div>
<div class="test">
  <p>change my color5</p>
</div>
<div class="test">
  <p>change my color6</p>
</div>
<button id="button1">ttt
</button>

CSS

.color1 {
  background-color: #CCC;
}

JavaScript

var bn = document.getElementById("button1");
bn.addEventListener("click", changeColor);


function changeColor() {
  var nodelist = document.getElementsByClassName('test');
  
  for (var i = 0; i < nodelist.length; i += 1) {
    nodelist[i].classList.toggle("color1");
  }
}