JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <div class="carre carre_1_1"></div>
        </td>
        <td>
            <div class="carre carre_1_2"></div>
        </td>
        <td>
            <div class="carre carre_1_3"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="carre carre_2_1"></div>
        </td>
        <td>
            <div class="carre carre_2_2"></div>
        </td>
        <td>
            <div class="carre carre_2_3"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="carre carre_3_1"></div>
        </td>
        <td>
            <div class="carre carre_3_2"></div>
        </td>
        <td>
            <div class="carre carre_3_3"></div>
        </td>
    </tr>
</table>
<p id="out"></p>

CSS

table {
		    border-collapse: collapse;
		}
		table, table td {
		    border: 1px black solid;
		}
		.carre {
		    width: 50px;
		    height: 50px;
		    background: tomato;
		    margin: .5em;
		}

JavaScript

var cell;
var out = document.querySelector("#out");
var test = function (e) {
    out.innerHTML += e.target.className +  "<br />";
    console.log(e);
    removeAllEvents();
};

// supprimer tous les événements
function removeAllEvents() {
    for (var i = 1; i < 4; i++) {
        for (var j = 1; j < 4; j++) {
            cell = document.querySelector("table tr:nth-child(" + i + ") td:nth-child(" + j + ") .carre");
            cell.removeEventListener('click', test, false);
        }
    }
}

// affecte les événements
for (var i = 1; i < 4; i++) {
    for (var j = 1; j < 4; j++) {
        (function (i, j) {
            cell = document.querySelector("table tr:nth-child(" + i + ") td:nth-child(" + j + ") .carre");
            cell.addEventListener('click', test, false);
        })(i, j);
    }
}