JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <caption>original</caption>
    <tbody>
        <tr>
            <th>head</th>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td class="last">last</td>
        </tr>
    </tbody>
</table>
<button type="button">clear log</button>
<div id="output"></div>

CSS

table {
    margin-bottom: 1em;
    border: 1px solid black;
}

table td {
    padding: 2px;
}

div { white-space: pre; }

JavaScript

function log(message) {
    document.getElementById('output').appendChild(document.createTextNode(
        message + '\n'));
}
$('button').click(function () {
    $('#output').empty();
});
$('tbody')
    .delegate('td.last', 'click', function (e) {
        e.stopPropagation();
        log('last');
    })
    .delegate('td:not(.last)', 'click', function (e) {
        e.stopPropagation();
        log('cell');
    })
    .delegate('tr', 'click', function () {
        log('row');
    });
var $table = $('table');
$table.clone(true)
    .find('caption').text('copy').end()
    .insertAfter($table);