JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="js-news-categories"/>

<div class="js-categories_select" style="margin-top:100px;">

</div>

JavaScript

var availableTags = [
 {
   id:1,
   value:"php"
 },
  {
   id:2,
   value:"java"
 },
  {
   id:3,
   value:"Asp.net"
 }
]

$( "#js-news-categories" ).autocomplete({
        minLength: 0,  
        source:function(request,response){
          response(availableTags);
        },
        multiselect: true,
        autoFocus: true,
        focus: function( event, ui ) {
        return false;
        },
        select: function( event, ui ) {     
        
        availableTags = jQuery.grep(availableTags, function(element) {
        return element.value != ui.item.value;
       });
        
        $( "#js-news-categories" ).val("");
        var catItems = '<span class="c_item" id="c_item_'+ ui.item.id +'">     <input type="hidden" value="'+ ui.item.id +'"/>'+ ui.item.value +'<button onclick="myfunction('+ ui.item.id +')"  type="reset" >X</button></span>';
        $(".js-categories_select").append(catItems);         
        return false;        

        } 
        });
        
        function myfunction(a) {    $("#c_item_"+a).remove(); }