JSFiddle - React, Tailwind, and code Playground

HTML

Skip &nbsp; <button id="Skip" class="red" onclick="controls(this.getAttribute('class'))"></button>

Text &nbsp; <button id="Text" class="red" onclick="controls(this.getAttribute('class'))"></button>

Game Center &nbsp; <button id="GameCenter" class="red" onclick="controls(this.getAttribute('class'))"></button>

Message &nbsp; <button id="Message" class="red" onclick="controls(this.getAttribute('class'))"></button>

Write &nbsp; <button id="Write" class="red" onclick="controls(this.getAttribute('class'))"></button>

Etras &nbsp; <button id="Extras" class="red" onclick="controls(this.getAttribute('class'))"></button>

Snyc &nbsp; <button id="Snyc" class="red" onclick="controls(this.getAttribute('class'))"></button>

Restart &nbsp; <button id="Restart" class="red" onclick="controls(this.getAttribute('class'))"></button>

CSS

.red { 
    background: red; 
    height: 20px;
    width: 20px;
    border-radius: 50px;
    border: 1px solid #000;
}
.green { 
    background: green;
    height: 20px;
    width: 20px;
    border-radius: 50px;
    border: 1px solid #000;
}

JavaScript

function controls(className) {
    if (className == "red") {
        document.getElementById('Skip').setAttribute('class','green');
        // You can define your enable statements here
    } else {
        document.getElementById('Skip').setAttribute('class','red');
        // You can define your disables statements here        
    }
}
  function controls(className) {
    if (className == "red") {
        document.getElementById('Text').setAttribute('class','green');
        /// You can define your enable statements here
    } else {
        document.getElementById('Text').setAttribute('class','red');
        //// You can define your disables statements here       
    }
}
  function controls(className) {
    if (className == "red") {
        document.getElementById('GameCenter').setAttribute('class','green');
        // You can define your enable statements here
    } else {
        document.getElementById('GameCenter').setAttribute('class','red');
        // You can define your disables statements here        
    }
}
  function controls(className) {
    if (className == "red") {
        document.getElementById('Message').setAttribute('class','green');
        /// You can define your enable statements here
    } else {
        document.getElementById('Message').setAttribute('class','red');
        //// You can define your disables statements here       
    }
  }function controls(className) {
    if (className == "red") {
        document.getElementById('Write').setAttribute('class','green');
        // You can define your enable statements here
    } else {
        document.getElementById('Write').setAttribute('class','red');
        // You can define your disables statements here        
    }
}
  function controls(className) {
    if (className == "red") {
        document.getElementById('Etras').setAttribute('class','green');
        /// You can define your enable statements here
    } else {
       ...