JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable">
  <tr id="1" class="myTR">
    <td class="myTD">Click me</td>
  </tr>
</table>

CSS

.active {
  color: red;
}

JavaScript

const listenerOne = (e) => {
  const node = e.target.cloneNode(true);
  const parent = e.target.parentElement;
  parent.removeChild(e.target);
	node.className += ' active';
  parent.appendChild(node);
}
 
const listenerTwo = (e) => {
  console.log('Parent is null: ' + !e.target.parentElement);
  console.log('Closest: ' + e.target.closest('table'));
  let td = document.querySelector('td');
  console.log(td); // shows the td with the added class
  console.log(e.target === td); // false
}

// document.addEventListener('click', listenerTwo);

var td = document.querySelector(".myTD");
var tr = document.querySelector(".myTR");

td.addEventListener('click', listenerOne);
tr.addEventListener('click', listenerTwo);