JSFiddle - React, Tailwind, and code Playground

HTML

<div class="location">
    <span class="add-on"><i class="icon-map-marker"></i></span>
    <input type="text" name="location_input" value="" id="location_value" placeholder="Click to enter location" autocomplete="off">
    <select name="location" id="location_home" multiple="" style="display: none;">
        <option value="1">North San Jose</option>
        <option value="2">South San Jose</option>
        <option value="3">Cupertino</option>
        <option value="4">Saratoga</option>
        <option value="5">Sunnyvale</option>
        <option value="6">Saratoga</option>
        <option value="7">Sunnyvale</option>
        <option value="8">Cupertino</option>
        <option value="9">Saratoga</option>
    </select>
    </div>

JavaScript

$('select[name="location"]').hide();

	$('.location input[type="text"]').toggle(function() {
		var icon_name = 'icon-chevron-up';

		$(this).parent().find('i').attr('class', icon_name);
		$(this).parent().find('select').slideDown(300);
	}, function() {
		var prnt_cls = $(this).parent().attr('class');
		
		if (prnt_cls=='location') {
			var icon_default = 'icon-map-marker';
		} else {
			var icon_default = 'icon-plane';
		}
		$(this).parent().find('i').attr('class', icon_default);
		$(this).parent().find('select').slideUp(300);
	});

	$('select[name="location"]').click(function() {
		var text = '';
		var size = 0;
		$(this).find('option:selected').each(function(index) {
			size++;
			if (size>5){
				alert('Maximum 5 item can be selected');
				$(this).removeAttr('selected');
				return false;
			}
			if (index>4) {
				$(this).removeAttr('selected');
				// console.log(index);
			};
			text = text + $(this).text() + ', ';
			if ($(this).find('option:selected').size()>5) {
				alert('Maximum 5 entries');
				return false;
			};
		});
		$(this).parent().find('input[type="text"]').attr('value', text);
	})