JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sel-box">
    <span id='select'>Select</span>
    <ul class='toc-odd level-1' id="sel-option">
      <li>
          <a href="1">It's finally here</a>
          <button>delete</button>
      </li>
      <li>
          <a href="2">Improvements</a>
          <button>delete</button>
      </li>
      <li>
          <a href="3">Handling</a>
          <button>delete</button>
      </li>
    </ul>
</div>

CSS

.sel-box{
    position:relative;
}
a{
    text-decoration:none;
}
#select{
    display:block;
    width:235px;
    height:20px;
    border:1px solid #999;
    padding:5px;
}
.toc-odd{
   position:absolute;
   top:32px;
   background:#f1f1f1;
   width:250px;
    display:none;
}
.toc-odd li{
    padding:5px 10px;
    border-bottom:1px solid #999;
}
button {
    border: 2px outset #aaa;
    border-radius: 4px;
}

JavaScript

$(function(){
    var isSelectShowed = false;
    $('#select').click(function(){
        if(isSelectShowed) {
            $('#sel-option').hide();
        } else {
            $('#sel-option').show();
        }
        isSelectShowed = !isSelectShowed;
    });
    
    $('#sel-option a').click(function(e){
        $('#select').text($(this).text());
        $('#sel-option').hide();
        $(this).addClass('current');
        e.preventDefault();
        isSelectShowed = false;
    })
    
    $("ul").on("click", "button", function(e) {
        e.preventDefault();
        $(this).parent().remove();
    });
})