JSFiddle - React, Tailwind, and code Playground

HTML

<span id='span-select'>Filters: </span>
<div class='options'>
<a class="button" href="#all">All</a>
<a class="button" href="#settings">Settings</a>
<a class="button" href="#categories">Categories</a>
</div>

<br /><br /><br /><br />
<select id='myselect'>
    <option>ALL</option>
    <option>Settings</option>
    <option>Categories</option>
</select>

CSS

.options{display: none;}
.options a {display: block;}

JavaScript

$(document).ready(function(){
    
    //click filters
    $('#span-select').click(function(){
        $('.options').toggle();
    }); 
    $('.options a').click(function(e){
        if($('#selItem').length == 1){
            $('#selItem').remove();
        }
       $('#span-select').after('<span id="selItem">'+ $(this).text() +'</span>');
       $('.options').toggle();
        //ajax call here
    });               

    //or select event
    $('#myselect').change(function(){
        if($('#selItem').length == 1){
            $('#selItem').remove();
        }
       $('#span-select').after('<span id="selItem">'+ $(this).val() +'</span>');
       //ajax call here
    
    });
    
    
});