JSFiddle - React, Tailwind, and code Playground

HTML

<div class="search-box">
    <div class="place-holder">Click here to filter by type</div>
</div>
<div class="search-options">
    <p class="options">First</p>
    <p class="options">Second</p>
</div>

CSS

.search-box {
    height:30px;
    width:200px;
    border:1px solid #eee;
    cursor:pointer;
}
.search-options {
    width:200px;
    margin-top:5px;
    border:1px solid #eee;
    display:none;
}
.tags-input {
    background:#4d90fe;
    margin-top:4px;
    color:#fff;
    font-size:12px;
    border-radius: 10px;
    display: inline-block;
    padding-left:5px;
    padding-right:5px;
    padding-bottom:2px;
}
.remove-tag {
    color:#fff;
    padding-left:10px;
    margin-top:-2px;
}
.remove-tag:hover {
    color:#fff;
    padding-left:10px;
    margin-top:-2px;
    text-decoration: none;
}

JavaScript

$(document).ready(function () {
    
    $('.search-box').click(function () {
        $('.search-options').toggle();
    });
    
    $('.options').click(function () {
        $('.place-holder').hide();

        var d = $('.search-box').html();
        var c = $(this).html();

        //                localStorage.setItem('check-array','filetypes:'+array2+';');
        if (d != '') {
            $('.search-box').html(d + '&nbsp;<div class="tags-input">' + c + '<a href="javascript:void(0)" class="remove-tag">x</a></div>');
        } else {
            $('.search-box').append('&nbsp;<div class="tags-input">' + c + '<a href="javascript:void(0)" class="remove-tag">x</a></div>');
        }
        var ab = $('.search-box div.tags-input');


    });
    $('.search-box').on('click','.remove-tag',function (event) {
        event.stopImmediatePropagation();
        $(this).parent().remove();
    });
});