JSFiddle - React, Tailwind, and code Playground

HTML

<table border=1>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>

CSS

td {
    padding: 10px;
}

JavaScript

function delegateSelector(selector, event, childSelector, handler) {

    var is = function(el, selector) {
      return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
    };
    
    var elements = document.querySelectorAll(selector);
    [].forEach.call(elements, function(el, i){
        el.addEventListener(event, function(e) {
            if (is(e.target, childSelector)) {
                handler(e);                
            }
        });
    });
}

delegateSelector('table', "click", 'td', function(e) {
    e.target.style.backgroundColor = 'green';
});

$('table').append('<tr><td></td><td></td><td></td><td></td><td></td></tr>');