JSFiddle - React, Tailwind, and code Playground

HTML

<table cellpadding="0" cellspacing="0" border="1" width="30%">
    <thead>
        <th width="50" style="background:navy; color:white;">City</th>
    </thead>
    <tr class="cityItem1">
        <td width="50" id="1">San Francisco</td>
    </tr>
    <tr class="cityItem1">
        <td width="50" id="2">Los Angeles</td>
    </tr>
</table>
<br />

<table cellpadding="0" cellspacing="0" border="1" width="30%" id="tblCity2">
    <thead>
        <th width="50" style="background:navy; color:white;">City</th>
    </thead>
</table>

JavaScript

$(document).ready(function() {
    $("table").on('mouseenter', 'tr', function() {
            $(this).css('background', 'yellow');
    }).on('mouseleave', 'tr', function () {
            $(this).css('background', '');
    });

    $("table tr").click(function () {
        var id = $(this).children().attr("id");
        $(".cityItem1").each(function m(x,e) {
            if ($(e).children().attr("id") == id) {
                $(e).remove();
                $("#tblCity2").append('<tr class="tableRow"><td width="750" id="' + $(e).children().attr('id') + '">' + $(e).children().html() + '</td></tr>');
            }
        });
    });
});