JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/jquery/jquery-ui"></script>
      <h2>Country Add</h2><br>
      (start writing country name and drop down will apear automatically)<br>
      <div class="ui-widget" style="float:left; width:25%">
        <input id="country_name" name="country_name" size="30"  />
      </div><br><br>

      <div id="div_selected_country" style="float:left; width:25%">
      </div><br><br>
      
      <div id="div_selected_ids">
      </div><br><br>
	  <input type="button" id="show_selected_item_ids" value="Show Selected Country Ids" />
      
      <br><br>
      <input type="button" id="btnSelectAll" value="Select All" /><br>
      <input type="button" id="btnRemoveAll" value="Remove All" />

CSS

label {
	display: inline-block;
	width: 5em;
}
body, td, th {
	font-family: Calibri;
	font-size: 12px;
}
	<style>
.ui-autocomplete {
	max-height: 300px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
}
/* IE 6 doesn't support max-height
		* we use height instead, but this forces the menu to always be this tall
		*/
* html .ui-autocomplete {
	height: 100px;
}

JavaScript

$(document).ready(function() {
  var availableTags = ["Afghanistan","Albania","Algeria","Andorra","Angola","Antigua"];
  var availableAllTags = availableTags; //original array which data not changed anywhere
  var selected_item_ids=new Array();
  var country;
  var i;
  $(function() {
	$( "#country_name" ).autocomplete({		
	  source: availableTags,
	  autoFocus: true,
	  select: function( event, ui ) {			   
		   country=ui.item.value;  //$('#target').text( ui.item.value );
		   $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+country+
				" <a href='?delete="+country+"' class='del_country'>X</a></span>"+"\n ");
		   //Add country id in selected_items array.
		   alert(availableAllTags[0]);
		                                                                                                                                                                                                                                                                                                                                                                   
		   
		   //Remove country name from availableTags array.
		   i = availableAllTags.indexOf(country);
		   availableTags.splice(i, 1);   //alert(availableTags[0]);
		   if ( ui.item ){
			  $(this).val('');
			  return false;
		   }
	  }
	});
  });
  
  $(document).on('click','a.del_country', function(e) { 
	e.preventDefault();/* prevent browser opening href url*/

    //Select country name and delete from availableTags array
	var href_val = $(this).attr('href');
    var item_name = href_val.split('delete=')[1];    //alert(item_name);
	selected_item_ids.splice(selected_item_ids.indexOf(availableAllTags.indexOf(item_name)), 1);
	
	/* remove parent span*/
	$(this).parent().remove();
	return false;
  });
  
  $(document).on('click','#show_selected_item_ids', function(e) { 
    var all_ids;
	all_ids="";
	$.each(selected_item_ids, function(index,value) {   
     all_ids = all_ids+...