JSFiddle - React, Tailwind, and code Playground

by TrowthePlow

HTML

<table>
    <tr id="result">
        <td id="col1Res">
            <div></div>
        </td>
        <td id="col2Res">
            <div></div>
        </td>
    </tr>
    <tr>
        <td id="col1">
            <div name="item1" class="radio">1</div>
            <div name="item2" class="radio">2</div>
            <div name="item3" class="radio">3</div>
            <div name="item4" class="radio">4</div>
        </td>
        <td id="col2">
            <div name="item1" class="radio">1</div>
            <div name="item2" class="radio">2</div>
            <div name="item3" class="radio">3</div>
            <div name="item4" class="radio">4</div>
        </td>
    </tr>
</table>

CSS

#result div {
    width: 16px;
    height: 24px;
    border: 1px solid black;
    text-align:center;
}

.radio {
    border-radius:8px;
    width:16px;
    height:16px;
    border: 1px solid black;
    margin: 4px;
    text-align:center;
}

#col1 .radio {
    background-color: pink;
}

#col2 .radio {
    background-color: lightyellow;
}

JavaScript

$(document).ready(function() {
    $('.radio').each(function(idx, el) {
        $(el).click(function() {
           $('#' + $(this).parent().attr('id') + 'Res').text($(el).text());
        });
    });
});