JSFiddle - React, Tailwind, and code Playground

HTML

<div id="paicasas">
        <div id="casa1" onclick="mudarbg(this)"></div>
        <div id="casa2" onclick="mudarbg(this)"></div> 
        <div id="casa3" onclick="mudarbg(this)"></div> 
        </br>
        <div id="casa4" onclick="mudarbg(this)"></div> 
        <div id="casa5" onclick="mudarbg(this)"></div> 
        <div id="casa6" onclick="mudarbg(this)"></div> 
        </br>
        <div id="casa7" onclick="mudarbg(this)"></div> 
        <div id="casa8" onclick="mudarbg(this)"></div> 
        <div id="casa9" onclick="mudarbg(this)"></div> 
        <button type="button" onclick="apagar()">Novo</button>
    </div>

CSS

#paicasas{
				margin:0 auto;
				display:table;
			}
			#paicasas div{
				width:100px;
				height:100px;
				border:1px solid black;
				display:inline-block;
				background-color:#FFF;
			}

JavaScript

var vez = 0;
			function mudarbg(casa){
				if(!casa.style.backgroundColor == "#FFF") return false;
				
				if(vez == 0 || vez % 2 == 0) casa.style.backgroundColor = "#000000";
				else casa.style.backgroundColor = "#bf0411";
				
				vez++;
			}
			function apagar(){
				var pai = document.getElementById("paicasas");
				for(var i = 0; i < pai.children.length; i++){
					if(pai.children[i].tagName == "DIV") pai.children[i].style.backgroundColor = "#FFF";
				}
			}