JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<input class="form-control typeahead" type="text" placeholder="Enter a skill..." id="skillsInput" />
							<br />
							<div class="table-responsive">
								<table class="table" id="skillsTable">
									<thead>
										<tr>
											<th>Skill</th>
											<th></th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>

JavaScript

$(function() {
	var skillsInput = $('#skillsInput');
	var skillsArray = [
		'HTML',
		'CSS',
		'Java',
		'JavaScript',
		'PHP',
		'jQuery',
		'Microsoft Office',
		'Teamwork'
	];
	var currentSkills = [];

	skillsInput.bind("enter", function(e) {
		if($.inArray(skillsInput.val(), skillsArray) != -1
			&& $.inArray(skillsInput.val(), currentSkills) == -1) {
			$('#skillsTable > tbody:last-child').append('<tr><td>' + skillsInput.val() + '</td><td class="remove-skill"><button class="btn btn-danger" type="button">X</button></td></tr>');
			currentSkills.push(skillsInput.val());
			skillsInput.typeahead('close');
			skillsInput.val('');
		}
	});
	skillsInput.keyup(function(e) {
		if(e.keyCode == 13)
			$(this).trigger("enter");
	});

	$('.remove-skill').on('click', function() {
		var $kill = $(this).parent('td').parent('tr');
		$kill.addClass('danger');
		$kill.fadeOut(1250, function() {
			$(this).remove();
		});
	});
});