JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" id="table">
    <tr class="cabecalho">
        <th class="not">ESTOQUE
            <br/><span>Produto / Preço / Cidade</span></th>
        <th class="coluna">Cidade 01</th>
        <th class="coluna">Cidade 02</th>
        <th class="coluna">Cidade 03</th>
        <th class="coluna">Cidade 04</th>
        <th class="coluna">Cidade 05</th>
        <th class="coluna">Cidade 06</th>
        <th class="coluna">Cidade 07</th>
        <th class="coluna">Cidade 08</th>
    </tr>
    <tr>
        <th class="feijao"><span>FEIJÂO</span></th>
        <td>
            <input type="button" value="3.20" class="btn" />
        </td>
        <td>
            <input type="button" value="2.00" class="btn" />
        </td>
        <td>
            <input type="button" value="3.00" class="btn" />
        </td>
        <td>
            <input type="button" value="4.00" class="btn" />
        </td>
        <td>
            <input type="button" value="3.00" class="btn" />
        </td>
        <td>
            <input type="button" value="4.00" class="btn" />
        </td>
        <td>
            <input type="button" value="3.00" class="btn" />
        </td>
        <td>
            <input type="button" value="4.00" class="btn" />
        </td>
    </tr>
    <tr>
        <th class="arroz"><span>ARROZ</span></th>
        <td>
            <input type="button" value="2.45" class="btn" />
        </td>
        <td>
            <input type="button" value="1.25" class="btn" />
        </td>
        <td>
            <input type="button" value="1.40" class="btn" />
        </td>
        <td>
            <input type="button" value="2.10" class="btn" />
        </td>
        <td>
            <input type="button" value="3.00" class="btn" />
        </td>
        <td>
            <input type="button" value="4.00" class="btn" />
        </td>
        <td>
            <input type="button" value="3.00" class="btn" />
        </td>
        <td>
            <input type="button"...

CSS

table {
    border-collapse: collapse !important;
}

table tr td input {
    width: 100%;
    border: none;
    background-color: #fff;
}

table tr td input:hover {
    width: 100%;
    border: none;
    background-color: #E7E9E8;
    cursor: pointer;
}

section legend {
    border-bottom: 1px solid #000;
    width: 55%;
    margin-bottom: 10px;
}

section article {
    width: 40%;
    background-color: #CC6F23;
    margin: 10px;
    padding: 10px;
}

section article p {
    margin: 0px;
    font-weight: bold;
    color: #fff;
}

article {
    display: none;
}

JavaScript

var articles = getElements('article');
var spans = articles.map(function(el) {
    return getElements('p span', el);
});


function getElements(selector, rel) {
    var list = (rel || document).querySelectorAll(selector);
    return [].slice.call(list);
}

function addValues(target, el, iTr, iTd) {
    var cidade = cols[iTd].innerHTML;
    var produto = linhas[iTr].querySelector('th').innerHTML;
    var preco = el.innerHTML;

    [cidade, produto, preco].forEach(function(val, i) {
        target[i].innerHTML = val;
    });
}

function handler(el, indexTr, indexTd) {
    return function(e) {
        articles[indexTr].style.display = 'block';
        addValues(spans[indexTr], el, indexTr, indexTd);

    }
}

var cols = getElements('th').slice(1);
var linhas = getElements('tr').slice(1);
linhas.forEach(function(tr, i) {
    var tds = getElements('td', tr);
    tds.forEach(function(td, j) {
        td.addEventListener('click', handler(td, i, j));
    });
});