JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css">
<!-- wrapper is purely to keep lists from jumping under each other -->
<div id="wrapper" style="display:block; width:500px; background-color:#eee;">
    <!-- list on the left, indexed 1 to 5 -->
    <ul class="list1">
        <li id="qq1">sdfsdv</li>
        <li id="qq2">bnvnvb</li>
        <li id="qq3">nmnutymnj7</li>
        <li id="qq4">cvbc</li>
        <li id="qq5">45tsgd</li>
    </ul>
    <!-- three line segments to highlight connections -->    
    <div id="segment1" class="hline"></div>
    <div id="segment2" class="vline"></div>
    <div id="segment3" class="hline"></div>
    <!-- list on the right, indexed by item correspondence to the left list -->
    <ul class="list2">
        <li id="aa3">fgtbrtgb</li>
        <li id="aa1">vbn xgbn</li>
        <li id="aa5">vdgver</li>
        <li id="aa4">asdasdv</li>
        <li id="aa2">nvfbnfn</li>
    </ul>
</div>

<div class="ui-widget-header" 
style="clear:both; width:500px; text-align:center;">
    Hover with the mouse to highlight connections between list items above
</div>

CSS

.highlight {
    background-color: cyan;
}

li { padding-left:1em; }

.list1 {
    display:block;
    float: left;
    width: 120px        
}



.list2 {
    display:block;
    float: left;
    width: 120px
}

.hline {    
    display:block;
    position:relative;
    height: 1px;
    width: 5em;
    color:#fff;   
    float:left;
}

.vline {
    position:relative;
    display:block;
    float:left;
    height: 1px;
    width: 1px;    
}

JavaScript

//highlights connected items based on id


function showConnection(n) {
    var leftY = $('#qq' + n).position().top;
    var rightY = $('#aa' + n).position().top;
    var H = Math.abs(rightY - leftY);
    if (H === 0) {
        H = 1;
    }
    $('#segment1').css('top', leftY + 'px');
    $('#segment3').css('top', rightY + 'px');
    $('#segment2').css('top', Math.min(leftY, rightY) + 'px');
    $('#segment2').css('height', H + 'px');
    $("#qq" + n + ", #aa" + n + "," + "#segment1,#segment2,#segment3").toggleClass("highlight");
}

$(".list1 li, .list2 li").hover(function() {
    var n = this.id.substr(2);
    showConnection(n);
});