JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list">
<ul>

                        <li id="onelink">one
                            <div class="description">
                                <ul>
                                    <li id="onelink">one</li>
                                    <li id="twolink">two</li>
                                    <li id="threelink">three</li>
                                    <li id="fourlink">four</li>
                                </ul>
                            </div>
                        </li>
                        <li id="twolink">two</li>
                        <li id="threelink">three</li>
                        <li id="fourlink">four</li>
</ul>
</div>

<div class="description">
    <span id="one">Lorem ipsum dolor.</span>
    <span id="two">Tempore tenetur, doloribus.</span>
    <span id="three">Culpa, fuga adipisci.</span>
    <span id="four">Commodi, quisquam, quaerat!</span>
</div>

CSS

.description span{
position: absolute;
display: none;
}

.vis{
display: block !important;
}

JavaScript

function displaydesc(id){
    id=id.replace('link','');
    $("#"+id).toggleClass("vis");
}

$(".list>ul>li").hover(
function(){
displaydesc($(this).attr("id"));
});