JSFiddle - React, Tailwind, and code Playground

HTML

<table id="test">
<tbody>
    <tr>
        <td class="row">
        
        </td>
        <td class="row">
        
        </td>
        <td class="row">
        
        </td>
        <td class="row">
        
        </td>
        <td class="row">
        
        </td>
    </tr>
        <tr>
        <td class="row">
        
        </td>
        <td class="row">
        
        </td>
        <td class="row">
        
        </td>
        <td class="row">
        
        </td>
        <td class="row">
        
        </td>
    </tr>
</tbody>
</table>

CSS

table {
    border: 1px solid;
    width: 300px;
    height: 300px;
}
table td {
    width: 25px;
    border: 1px dashed;
}

JavaScript

(function(){
    $('table#test').on('click','td.row', function(e){
         alert('Row clicked!');        
    });
    $('table#test').on('click', 'img.live', function(e){
        e.stopPropagation();
        alert('Image clicked!');            
    });
    $('td.row').html('<img src="http://fc03.deviantart.net/fs71/f/2011/161/f/c/nyan_cat_avatar_by_oxoxnaminemayxoxo-d3il6gm.gif" class="live">');
})();