JSFiddle - React, Tailwind, and code Playground

by Hari Menon

HTML

<table id="myTable">
    <tr>
        <th>header 1</th>
        <th>header 2</th>
        <th>header 3</th>
    </tr>
    <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
    </tr>
</table>
<br />
<div id="selectedVlues"></div>

CSS

table {
    width:80%;
}
th, td {
    border:.1em solid #999;
    width:33%;
    text-align:center;
}

#selectedVlues {
    min-height:1em;
    border:.1em solid #00f;   
}

.added{
    background-color:#333;
}

JavaScript

$(function() {
    $("th").click(function() {
        if ($(this).hasClass('added')) return;
        $(this).addClass('added');
        $("#selectedVlues").append(
        $('<div>').addClass('selectedItem').text($(this).text()).click(function() {
            $(this).detach();
            var selector = "#myTable th.added:contains(" + $(this).text() + ")";
            $(selector).removeClass('added');
        }));
    });
});