JSFiddle - React, Tailwind, and code Playground

by George Cristian

HTML

<body>
	<div id="cp-search-wrapper">
		<ul id="cp-search-category-list">

		</ul>
		<div id="cp-search-add-category">
			<select id="cp-search-categories">
				<option>Option 1</option>
				<option>Option 2</option>
			</select>
			<button id="cp-search-btn-add">Add category</button>			
		</div>
	</div>
</body>

JavaScript

jQuery(document).ready(function($) {
			$(document).on('click', '.cp-search-btn-remove', removeCategory);
			$('#cp-search-btn-add').on('click', addNewCategory);	
		});

		function addNewCategory(){
			console.log("add");
			var categoryName = $('#cp-search-categories :selected').text();
			var newCategoryHTML = '<li>' + categoryName + '<button class="cp-search-btn-remove">X</button></li>';
			var $list = $('#cp-search-category-list');
			if($list.html().indexOf(newCategoryHTML) < 0){
				$list.append(newCategoryHTML);
			}
			
		}
		function removeCategory(event){
			var category = $(event.target).parent('li');
			$('#cp-search-category-list').find(category).remove();
		}