JSFiddle - React, Tailwind, and code Playground

HTML

<p style="font-weight:bold">click to highlight and deactivate </p>
<table>
    <tr id="test1"><td>test 1</td></tr>
    <tr id="test2"><td>test 2</td></tr>
    <tr id="test3"><td>test 3</td></tr>
    <tr id="test4"><td>test 4</td></tr>
    <tr id="test5"><td>test 5</td></tr>
    <tr id="test6"><td>test 6</td></tr>
    <tr class="datarow"><td></td></tr>
</table>

JavaScript

$('.datarow').on('rowinactive',function(e, elem){
    $(this).html(elem.id + ' is inactive');
});

$('table tr').on('click', function() {
    $(this).highlight();
    $('.datarow').trigger('rowinactive', this); // passes the element
});

$.fn.highlight = function() {
    this.css('color', 'orange');
}