JSFiddle - React, Tailwind, and code Playground

HTML

<p>Кликните на ячейке для начала редактирования. Когда закончите -- нажмите OK или CANCEL.</p>

<table id="bagua-table">
    <tr>
        <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
    </tr>
    <tr>
        <td class="nw"><strong>Northwest</strong>
            <br>Metal
            <br>Silver
            <br>Elders
        </td>
        <td class="n"><strong>North</strong>
            <br>Water
            <br>Blue
            <br>Change
        </td>
        <td class="ne"><strong>Northeast</strong>
            <br>Earth
            <br>Yellow
            <br>Direction
        </td>
    </tr>
    <tr>
        <td class="w"><strong>West</strong>
            <br>Metal
            <br>Gold
            <br>Youth
        </td>
        <td class="c"><strong>Center</strong>
            <br>All
            <br>Purple
            <br>Harmony
        </td>
        <td class="e"><strong>East</strong>
            <br>Wood
            <br>Blue
            <br>Future
        </td>
    </tr>
    <tr>
        <td class="sw"><strong>Southwest</strong>
            <br>Earth
            <br>Brown
            <br>Tranquility
        </td>
        <td class="s"><strong>South</strong>
            <br>Fire
            <br>Orange
            <br>Fame
        </td>
        <td class="se"><strong>Southeast</strong>
            <br>Wood
            <br>Green
            <br>Romance
        </td>
    </tr>

</table>

CSS

th {
    text-align: center;
    font-weight: bold;
}

td {
    width: 150px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
}

.nw {
    background-color: #999;
}

.n {
    background-color: #03f;
    color: #fff;
}

.ne {
    background-color: #ff6;
}

.w {
    background-color: #ff0;
}

.c {
    background-color: #60c;
    color: #fff;
}

.e {
    background-color: #09f;
    color: #fff;
}

.sw {
    background-color: #963;
    color: #fff;
}

.s {
    background-color: #f60;
    color: #fff;
}

.se {
    background-color: #0c3;
    color: #fff;
}

.textarea {
    width: 158px;
    height: 79px;
    padding: 5px;
    position: absolute;
    top: 0;
    left: 0;
}

.active {
    background-color: inherit;
    position: relative;
}

.ok {
    position: absolute;
    top: 90px;
    left: 0;
}
.cancel {
    position: absolute;
    top: 90px;
    left: 30px;

}

JavaScript

var compare;
    var selectedTd = '';
    var notEdited;
    var table = document.querySelector('table');

    table.onclick = function(event) {
        var target = event.target;

        if (target.tagName == 'TD') {
            compare = selectedTd.localeCompare(target.className);

            if (selectedTd != undefined) {

                if (compare == 0 ) { //проверяем, кликаем ли мы по одной и той же ячейке дважды
                    return;
                } else { // проверяем, есть ли уже кликнутая активная ячейка
                    //если да, то вторую ячейку выделять нельзя
                    if ((selectedTd != undefined) &&(selectedTd.split(' ')[1] == 'active'))
                    {return;}

                    // собственно код открытия для редактирования ячейки
                    notEdited = target.innerHTML;
                    var textarea = document.createElement('textarea');
                    textarea.value = target.innerHTML;
                    target.appendChild(textarea);
                    textarea.classList.add('textarea');
                    target.classList.add('active');

                    target.insertAdjacentHTML("beforeEnd",
                            '<button class="ok">Ok</button><button class="cancel">Cancel</button>'
                    );
                }
            }
            selectedTd = target.className;
        }
        if (target.className == 'ok') {
            target.parentElement.classList.remove('active');
            if (selectedTd.split(' ')[1] == 'active') {selectedTd = selectedTd.split(' ')[0];}
        }
        if (target.className == 'cancel') {
            target.parentElement.classList.remove('active');
            target.parentElement.innerHTML = notEdited;
            if (selectedTd.split(' ')[1] == 'active') {selectedTd = selectedTd.split(' ')[0];}
        }
    };