JSFiddle - React, Tailwind, and code Playground

HTML

<div id="places">
	<div id="added"></div>
	<input type="text" id="place"></input>
	<div id="suggestions">Loading Suggestions</div>
</div>

CSS

*{
	position: relative; font-family: arial; margin: 0; padding: 0; font-size: 12px
}
#places{
	width: 300px;
	background: #fff;
	color: #FFFFFF;
	border: 1px solid #217cb0;
	margin: 10px;
	padding: 5px;
}
#added{display: inline;margin: 0; padding: 0;position: relative; width: 300px;}
#places span{display: inline-block; margin: 2px; padding: 8px 10px; }
input#place{color: #58ACFA; background: #eee;border: 0; width: 100px; padding: 5px; height:auto; margin:0;display: inline;}
input#place:focus{border: 0; outline: 0}
#suggestions{display: inline-block; padding:5px; background: #58ACFA; width: 290px; margin-top: 5px; height: auto;display: none}
.addedPlace{background: #217cb0; margin: 2px; padding: 8px 10px; line-height: 120%}
.addedPlace:hover{background: #FF0040; cursor: no-drop}
.place{background: #217cb0; margin: 0 5px 5px 0; padding: 8px 10px; line-height: 120%}
.place:hover{cursor: cell; background: #088A4B}

JavaScript

//You need to fetch this array from somewhere
var placeArray = ["nepalgunj","attaria","kathmandu","dhangadi","pattliya","sindhuli","biratnagar","janakpur","baitadi","arora", "goshoo"];



$("#place").keyup(function foo(){
	$("#suggestions").show(200);
	$("#suggestions").html("");
	var thisPlace = $("#place").val();

	if(thisPlace.length == 0){
		$("#suggestions").hide(200);		
	}

	var suggestedPlaces = [];
	for(i= 0; i<placeArray.length; i++){
		var pointed = placeArray[i];
		if (pointed.indexOf(thisPlace) >= 0){
				suggestedPlaces.push(placeArray[i]);
		}
	}


    for(i= 0; i<suggestedPlaces.length; i++){
		$("#suggestions").append("<span class='place' id='"+suggestedPlaces[i]+"'>"+ucFirst(suggestedPlaces[i])+"</span>");
    }
	if (suggestedPlaces.length == 0){
            $("#suggestions").html("Sorry. No Results Found. Contact the Administrator for more places. ");
    }
});

$( "#suggestions" ).on("click", ".place",  function() {
	console.log(this.id + " added!");
	var thisPlaceX = this.id;;
	$("#added").append("<span class='addedPlace'>"+ucFirst(thisPlaceX)+"</span>");
	$("#place").val("");
	$("#suggestions").hide(200);
	$("#suggestions").html("");
});

$( "#added" ).on( "click", ".addedPlace", function() {
 // alert( $( this ).html() );
 	var x = $("#added").html();	
  	var y = '<span class="addedPlace">'+$( this ).html()+ '</span>';
  	var z = x.split(y);
  	var z = z.join("");
  	//var x = x.join("");
 	var x = $("#added").html(z);	
  	console.log(z +" Removed: -->"+ y);

});

function ucFirst(string){
    return string.charAt(0).toUpperCase() + string.slice(1);
}