JSFiddle - React, Tailwind, and code Playground

HTML

Enter number between 110 and 115:<br />
<div class="relative">
    <input type="text" list="numbers" id="numbers-inp">
    <div id="numbers-sel"></div>
</div>

<datalist id="numbers">
	<option value="110">
	<option value="111">
	<option value="112">
	<option value="113">
	<option value="114">
	<option value="115">
</datalist>

CSS

.relative { position: relative; } 
input, #numbers-sel{ position: absolute; top:0; left:0; }
input { 
    z-index: 2; 
    width:149px; 
    height:20px; 
}
#numbers-sel { 
    z-index: 1; 
    cursor: default; 
    top:26px; 
    width:151px;
    border: 1px solid #7F9DB9;
    background-color: white;
    font-size: 13px;
    font-family: Arial;
    display: none;
}
#numbers-sel div{ 
    padding-top: 3px; 
    padding-bottom: 3px;
    padding-left: 4px;
}
#numbers-sel div:hover{ 
    background-color: #0A246A; 
    color: white;    
}
datalist {z-index:50}

JavaScript

$(document).ready(function(){
    var $selectLike = $('#numbers-sel');
    var $numbersInp = $('#numbers-inp');
    $('#numbers option').each(function(){//copy from datalist
        $selectLike.append("<div>"+$(this).val()+"</div>");
    }); 
    $numbersInp.focus(function(){ //show or hide on focus
        $selectLike.show();
    }).blur(function(){
        setTimeout(function(){$selectLike.hide()},100);
    });
    $("#numbers-sel div").click(function(){
        $numbersInp.val($(this).html());
        $selectLike.hide();
    });
});