JSFiddle - React, Tailwind, and code Playground

by Jafaruddeen Ansari

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="div">
		<div class="a">Test <span>X</span></div>
	</div>
	
	<input type="text" id="text">
	<button id="btn">Add</button>

CSS

.a{display: inline-block; padding: 5px 35px 5px 10px; position: relative; background: #eee; border-radius: 20px; margin: 10px;}
	.a span{position: absolute; top: 0; right: 0; background: #333; color: #fff; height: 28px; width: 28px; text-align: center; line-height: 28px; border-radius: 30px;}
	}

JavaScript

$(document).ready(function(){
		$('#btn').click(function(){
			var menuFieldName = $('#text').val();
			$('.div').append('<div class="a">'+menuFieldName+'<span>X</span></div>');
			$('#text').val('');
		});
	
		$('.div .a span').on('click', function(){
			$(this).parent().remove();
		});
});