JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Country Add</h2>
      <div class="ui-widget" style="float:left; width:25%">
        <input id="country_name" name="country_name" size="30"  />
      </div>
      <input type="hidden" name="hid_country_names" id="hid_country_names" />
<br /> <br/>
      <div id="div_selected_country" style="float:left; width:25%">
      </div>

CSS

label {
	display: inline-block;
	width: 5em;
}
body, td, th {
	font-family: Calibri;
	font-size: 12px;
}
.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

$(function() {
	$( document ).tooltip({
	  track: true
	});
	});
$(document).ready(function() {
  $(function() {
	var availableTags = ["Bangladesh","USA","Uk","CANADA","Angola","Antigua and  Barbuda","Argentina"];
	var country;
	$( "#country_name" ).autocomplete({
	  source: availableTags,
	  autoFocus: true,
	  select: function( event, ui ) {			   
		   country=ui.item.value;  //$('#target').text( ui.item.value );
		   //$('#div_selected_country').text($('#div_selected_country').html()+"\n "+country);
		   $('#div_selected_country').append("<span>"+country+
				" <a href='?delete=1' class='del_country'>X</a></span>"+"\n ");
		   //$('#hid_country_names').val($('#div_selected_country').html());
		   if ( ui.item ){
			  $(this).val('');
			  return false;
		   }
	  }
	});
  });
});
$(document).ready(function() {
	
	$(document).on('click','a.del_country', function(e) { //.on in JQuery 1.9 and up instead of .live
        e.preventDefault();
        $(this).parent('li').remove();
	});
});