JSFiddle - React, Tailwind, and code Playground

HTML

<table id="bondesjakk">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<button id="reset">Start på nytt</button>

CSS

td {
    width:60px;
    height:60px;
    border:1px solid black;
}

JavaScript

(function(document) {
    var tiles = document.getElementsByTagName("td"), // Alle rutene
        lastTile,
        i = 0,
        turn = 0; // Hvem sin tur (0 == rød, 1 == grønn)

    for(; i < tiles.length; i++) { // Går igjennom alle rutene og legger til en "click" listener
        tiles[i].addEventListener("click", function(e) {
            var currentColor = this.style.backgroundColor; // Cacher bakgrunnsfargen
            if(currentColor === "" || currentColor === "white") {
                if(turn === 0) {
                    this.style.backgroundColor = "red";
                    lastTile = this;
                    turn = 1;
                } else if (turn === 1) {
                    this.style.backgroundColor = "green";
                    lastTile = this;
                    turn = 0;
                }
            } else {
                if(this === lastTile) {
                    this.style.backgroundColor = "white";
                    turn = (currentColor === "green") ? 1 : 0;
                }
            }
        }, false);
    }
    
    document.getElementById("reset").addEventListener("click", function(e) {
        var j = 0;
        for(; j < tiles.length; j++) {
            tiles[j].style.backgroundColor = "white";
            turn = 0;
            lastTile = null;
        }
    }, false);
})(document);