JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
    <span>Hover over me</span>
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
    <input type="submit" value="Select" />
    <div class="show-me">
        <p>Hover 1</p>
    </div>
</div>
<div class="item">
    <span>Hover over me</span>
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
    <input type="submit" value="Select" />
    <div class="show-me">
        <p>Hover 2</p>
    </div>
</div>
<div class="item">
    <span>Hover over me</span>
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
    <input type="submit" value="Select" />
    <div class="show-me">
        <p>Hover 3</p>
    </div>
</div>

CSS

.item {
    float: left;
    background: #d2d2d2;
    padding: 20px;
    margin-right: 10px;
    position: relative;
}

    .item span:hover {
        cursor: pointer;
    }

.item ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.show-me {
    display: none;
    background: red;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

JavaScript

//Show item on hover for current item hovered
var item = $('.item'),
    itemShow = $('.show-me');

item.hover(function() {
    $(this).find('.show-me').show();
    console.log("hovered");
    }, function() { 
	$(this).find('.show-me').hide();
});


//Click select to hide options 
$('.item').find('input').on('click', doSomething);

function doSomething() {
     $('.item').find('ul').hide();
    console.log("select was clicked");
}