JSFiddle - React, Tailwind, and code Playground

by compwhizii

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/vader/jquery-ui.css">
<table>
    <tbody><tr>
        <th>Available Clients</th>
        <th>Account's Clients</th>
        </tr>
        <tr>
            <td><div style="overflow:auto;height:8em; width:190px;border:1px solid black;float:left;" id="eBox1" class="entBox">
                <div client="4" switch="2" class="entity_id" style="cursor: pointer; ">4:Goldfish Capital</div>
                <div client="5" switch="2" class="entity_id" style="width: 100%; color: black; background-color: transparent; cursor: auto; ">5:Blue Moon Enterprises</div>
                <div client="15" switch="2" class="entity_id" style="width: 100%;">15:Silver Dollar</div>
                <div client="20" switch="2" class="entity_id" style="width: 100%;">20:Green Tree Capital</div>
                <div client="39" switch="2" class="entity_id" style="width: 100%;">39:Haiku International</div>
                </div></td>
            <td style="padding-left: 5px;"><div style="overflow:auto;height:8em;width:190px;border:1px solid black;float:left;background-color:#A9A9A9;" id="eBox2" class="entBox">
                <div client="38" switch="2" class="entity_id" style="width: 100%;">38:Global Dynamics</div>
                </div></td>
        </tr>
    </tbody></table>

JavaScript

var $clickAllowed = true;
$('.entity_id').live('mouseover mouseout', function(event) {
    if ($clickAllowed) {
        if (event.type == 'mouseover') {
            //                console.log('mouseIn entityID', $(this).attr('client'))
            $(this).css({
                'color': 'white',
                'background-color': 'black',
                'cursor': 'pointer'
            })
            var arrowType = '&gt;';
            var spaceBefore = '&nbsp;&nbsp;&nbsp;';
            var spaceAfter = '';
            if ($(this).closest('.entBox').attr('id') == 'eBox2') {
                arrowType = '&lt;'
                spaceBefore = '';
                spaceAfter = '&nbsp;&nbsp;&nbsp;';
            }
            var arrows = '<span class="theArrows">' + spaceBefore + arrowType + arrowType + arrowType + spaceAfter + '</span>';
            if ($(this).closest('.entBox').attr('id') == 'eBox2') {
                $(this).prepend(arrows)
            }
            else {
                $(this).append(arrows)
            }
        } else {
            //                console.log('mouseOut')
            $(this).css({
                'color': 'black',
                'background-color': 'transparent',
                'cursor': 'auto'
            })
            $('.theArrows').remove()
        }
    }
}).live('click', function() {
    if ($clickAllowed) {
        var close = $(this).closest('.entBox').attr('id');
        //        console.log(close);
        var open = 'eBox1'
        if (close == 'eBox1') {
            open = 'eBox2'
        }
        var selected = $("div#eBox2 > div");
        if (selected.length == 3 && open == 'eBox2') {
            $("<div>").dialog({
                modal: true,
                beforeClose: function() {
                    $(this).remove();
                },
                title: 'ERROR!',
                buttons: {
                    ok: function() {
                        $(this).dialog('close')
                   ...