JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <button id="toggle">Toggle color</button>
</div>

CSS

TABLE.field {
    border-collapse: collapse;
    margin: auto;
}
TABLE.field TD {
    width: 28px;
    box-sizing: border-box;
    height: 28px;
    border: 1px solid #b77;
}
TABLE.field TD.white {
    background-color: white;
}
TABLE.field TD.black {
    background-color: black;
}
BUTTON#toggle {
    margin: 5px;
}
DIV#wrapper {
    text-align: center;
}

JavaScript

//window.onload = function(){
    var table = document.createElement('table');
    table.setAttribute('class', 'field');
    var toggle = document.getElementById('toggle');
    document.getElementById('wrapper').insertBefore(table, toggle);
    toggle.addEventListener('click', function(){
        var tds = document.getElementsByTagName('td');
        var length = tds.length;
        for(var i=0; i < length; i++){
            if(tds[i].getAttribute('class') === 'black'){
                tds[i].setAttribute('class', 'white');
            }else{
                tds[i].setAttribute('class', 'black');
            }
        }
    });
    for(var i=0; i < 12; i++){
        var tr = document.createElement('tr');
        table.appendChild(tr);
        for(var j=0; j < 12; j++){
            var td = document.createElement('td');
            tr.appendChild(td);
            td.setAttribute('class', 'white');
            td.addEventListener('mousedown', function(){
                if(this.getAttribute('class') === 'black'){
                    this.setAttribute('class', 'white');
                }else{
                    this.setAttribute('class', 'black');
                }
            });
        }
    }
//};