JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

CSS

.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }

JavaScript

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;
alert('blockSet[0].textContent: ' + blockSet[0].textContent);
blockSet[0].className = "block-selected";
alert('blockSet[1].textContent: ' + blockSet[1].textContent);
blockSet[1].className = "block-selected";
alert('blockSet[2].textContent: ' + blockSet[2].textContent);
blockSet[2].className = "block-selected";
alert('blockSet[3].textContent: ' + blockSet[3].textContent);
blockSet[3].className = "block-selected";
alert('blockSet[4]: ' + blockSet[4]);
blockSet[4].className = "block-selected";
alert('blockSet[5]: ' + blockSet[5]);
blockSet[5].className = "block-selected";
alert('blockSet[6]: ' + blockSet[6]);
blockSet[6].className = "block-selected";
alert('blockSet[7]: ' + blockSet[7]);
blockSet[7].className = "block-selected";