JSFiddle - React, Tailwind, and code Playground

HTML

<table id="entryTable" onclick="tableClick(event)">
    <caption>
        Entry Table
    </caption>
    <thead>
        <tr>
            <th>type</th>
            <th>action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>chien</td>
            <td>whoua whoua</td>
        </tr>
         <tr>
            <td>chat</td>
            <td>miaou</td>
        </tr>
         <tr>
            <td>canard</td>
            <td>coincoin</td>
        </tr>
    </tbody>
</table>

<table id="incomingTable">
     <caption>
        Incoming Table
    </caption>
    <tbody>
        
    </tbody>
</table>

CSS

table, td, th {border:1px solid black;}
td, th {padding:2px;}
#entryTable, #incomingTable {float:left;width:200px;}

JavaScript

function tableClick(evt) {
    console.log('click',evt);
    evt = evt || window.event;
    var target = evt.srcElement || evt.target;
    
    //get the TR because target can be a sub child of TR
    while(target.parentNode && target.nodeName!='TR') 
        target = target.parentNode;
         
    // if target is TR and parentNode is TBODY cause we protect Thead and Tfoot, we add the line to the next table.
    if(target.nodeName=='TR' && target.parentNode.nodeName=='TBODY') {
     document.getElementById('incomingTable').tBodies[0].appendChild(target.cloneNode(true));
    }
}