JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btnParent1" class="parentButton">Parent 1</button><br />
    <div id="btnParent1Child" class="hiddenButtons">
        <button>Child 1</button>
        <button>Child 2</button>
    </div>
<button id="btnParent2" class="parentButton">Parent 2</button><br />
    <div id="btnParent2Child" class="hiddenButtons">
        <button>Child 1</button>
        <button>Child 2</button>
    </div>
<button id="btnParent3" class="parentButton">Parent 3</button>

CSS

.parentButton { /*orange buttons*/
    height:25px;
    width:200px;
    background:#fa0;
}
.hiddenButtons { /*blue div*/
    display:none;
    background:#0af;
    width:100px;
    padding:5px;
    text-align:center;
    position:relative;
    top:-25px;
    left:200px;
}

JavaScript

$('.parentButton').hover(function () {
            $('.hiddenButtons').hide();
            var childID = '#' + this.id + 'Child';
            $(childID).show();
        });