JSFiddle - React, Tailwind, and code Playground

HTML

<div class="problem-select">
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <input type="hidden" value="1" />    
</div>

<div class="overlapping-div">
    
</div>

<div class="hover-here">
    Hover here
</div>

<input class="other-input" type="text" />

CSS

.problem-select {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}

.overlapping-div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 100;
    display: none;
}

.hover-here {
    position: absolute;
    right: 70px;
    top: 0px;
    border: 1px solid black;
    height: 100px;
    width: 100px;
}

.other-input {
    position: absolute;
    top: 200px;
    left: 0px;
}

JavaScript

jQuery(document).ready(function() {
        jQuery(".hover-here").hover(function(){ showDiv(); }, function(){ hideDiv(); });
        //Used in potential solution 7...
        //jQuery("select").change(function(){ jQuery(this).siblings('input').val(jQuery(this).val()); });
    });



    function showDiv() {
        //Potential solution number 1... (does't work in chrome or safari)
        //jQuery('select').blur();
        
        //Potential solution number 2... (leaves lines on top of the red div)
        //jQuery('option').hide();
        
        //Potential solution number 3... (doesn't work in safari and still has the issue of working out which selects to hide)
        //jQuery('select').hide();
        
        //Potential solution number 4... (doesn't hide drop down options at all and would also need to know which selects to disable)
        //jQuery('select').attr('disabled','disabled');
        
        //Potential solution number 5... (doesn't work at all)
        //jQuery(".hover-here").click();
            
        //Potential solution number 6... (doesn't work in safari or chrome)
        //jQuery('.other-input').focus();
        
        //Potential solution number 7... (doesn't work in safari)
        //innerHtml = jQuery('.problem-select').html();
        //value = jQuery('.problem-select').children("input").val();
        //jQuery('.problem-select').html(innerHtml);
        //jQuery('.problem-select').children("select").val(value);
        
        
        jQuery('.overlapping-div').show();
    }

    function hideDiv() {
        //Potential solution number 2 cont...
        //jQuery('option').show();
        
        //Potential solution number 3 cont...
        //jQuery('select').show();
        
        //Potential solution number 4 cont...
        //jQuery('select').attr('disabled',null);
        
        jQuery('.overlapping-div').hide();
    }