JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="wrapper">
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
</ul>

<button id="toggleClass">Toggle Class</button>

<button id="removeClass">Remove Class</button>

CSS

#wrapper {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.box {
    background-color: yellow;
    width: 100px;
    height: 100px;
    border: 1px solid;
    list-style-type: none;
}


/*If all of '.box' DOES'T have the class '.extraClass`; make background of '.box' pink*/

.box {
    background-color: pink;
}

.extraClass {
    background-color: red;
}

JavaScript

var toggleClass = document.getElementById('toggleClass'),
    box = document.getElementsByClassName('box'),
    randomNumber = -1;

toggleClass.addEventListener('click', function() {
    if (randomNumber !== -1) box[randomNumber].classList.remove('extraClass');
    randomNumber = Math.floor(Math.random() * 9);
    box[randomNumber].classList.toggle('extraClass');
});
removeClass.addEventListener('click', function() {
    if (randomNumber !== -1) box[randomNumber].classList.remove('extraClass');
});