JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<table id="tbl2">
    <thead>
        <tr><th colspan="2">Choose</th></tr>
    </thead>
    <tbody>
        <tr><td><input type="checkbox"/></td><td>Example 1</td></tr>
        <tr><td><input type="checkbox"/></td><td>Example 2</td></tr>
        <tr><td><input type="checkbox"/></td><td>Example 3</td></tr>
    </tbody>
</table>

<table id="tbl1">
    <thead>
        <tr><th colspan="2">Selected</th></tr>
    </thead>
    <tbody>

    </tbody>
</table>

CSS

.tr{border:1px solid ; width:100%; height:22px; background:#ccc; color:#000;}
td, tr,th{width:300px; border:1px solid gold;}
td {font-weight:600;}
#tbl1{border:1px solid red; height:100px; width:100%; display:block;}
#tbl2{border:1px solid green; height:100px; width:100%; display:block;}
table {width:100%;}

.selectedRow{background:#DCECEF;}

JavaScript

if($('#tbl2').length) {
    $('#tbl2 tbody tr').live('mouseover',function(){                         $(this).addClass('selectedRow');                                            }).live('mouseout',function(){
         $(this).removeClass('selectedRow');
    }).live('click',function(){
         var row = $(this);
         $(this).removeClass('selectedRow');
         $('#tbl1 tbody').append($(this).remove());
    });
    $('#tbl1 tbody tr').live('mouseover',function(){      
         $(this).addClass('selectedRow');                  
    }).live('mouseout',function(){
         $(this).removeClass('selectedRow');
    }).live('click',function(){
         var row = $(this);
         $(this).removeClass('selectedRow');
         $('#tbl2 tbody').append($(this).remove());
    });
}