JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
		1. Single Edition ---> Working:
	</h3>

<br />
<div id="tagList" title="TagEditor">
    <input id="tagOutput" type="hidden" name="tags" value="Tag1;Tag2;Tag3;" />
    <textarea id="tagInput"></textarea>
    <div>Tag1</div>
    <div>Tag2</div>
    <div>Tag3</div>
</div>
<br />
<h3>
		2. Single Edition ---> Not working:
	</h3>

<br />
<div id="tagList" title="TagEditor">
    <input id="tagOutput" type="hidden" name="tags" value="Tag4;Tag5;Tag6;" />
    <textarea id="tagInput"></textarea>
    <div>Tag4</div>
    <div>Tag5</div>
    <div>Tag6</div>
</div>
<br />
<h3>
		1. Multiple Edition ---> Not working:
	</h3>

<br />
<div class="tagList" title="TagEditor">
    <input type="hidden" name="tags" value="Tag1;Tag2;Tag3;" />
    <textarea name="tagInput"></textarea>
    <div>Tag1</div>
    <div>Tag2</div>
    <div>Tag3</div>
</div>
<br />
<h3>
		2. Multiple Edition ---> Not working:
	</h3>

<br />
<div class="tagList" title="TagEditor">
    <input type="hidden" name="tags" value="Tag4;Tag5;Tag6;" />
    <textarea name="tagInput"></textarea>
    <div>Tag4</div>
    <div>Tag5</div>
    <div>Tag6</div>
</div>
<br />
<h3>
		3. Multiple Edition ---> Not working:
	</h3>

<br />
<div class="tagList" title="TagEditor">
    <input type="hidden" name="tags" value="Tag7;Tag8;Tag9;" />
    <textarea name="tagInput"></textarea>
    <div>Tag7</div>
    <div>Tag8</div>
    <div>Tag9</div>
</div>

CSS

/*Single Edition*/
		#tagList {
			position: relative;
			overflow: hidden;
			height: auto;
			width: 200px;
			padding: 10px;
			padding-right: 0;
			background-color: white;
			border-radius: 3px;
			border: thin solid #ddd;
			padding-bottom: 30px;
			max-height: 40px;
		}

			#tagList textarea {
				position: absolute;
				height: 11pt;
				width: 202px;
				resize: none;
				overflow: hidden;
				bottom: 0;
				left: 0;
				padding: 3px;
				font-size: 11pt;
				color: #5e5e5e;
				opacity: 0.8;
				background: -moz-linear-gradient(bottom,rgba(255, 255, 255, 0),#BBEEAA); /* Firefox */
				background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, 0)),to(#BBEEAA)); /* Chrome, Safari */
			}

			#tagList div {
				/*special settings*/
				display: inline-block;
				/*relative position*/
				margin-bottom: 10px;
				margin-right: 10px;
				padding: 3px;
				padding-right: 22px;
				/*design*/
				border-radius: 3px;
				font-size: 11pt;
				color: #5e5e5e;
				border: thin solid #ddd;
				background-image: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/delete.png');
				background-size: 18px;
				background-position: right center;
				background-repeat: no-repeat;
				background-color: white;
				transition-duration: 250ms;
				transition-property: border-color, background-size;
			}

				#tagList div:hover {
					border-color: #aaa !important;
				}
		/*Multiple Edition*/
		.tagList {
			position: relative;
			overflow: hidden;
			height: auto;
			width: 200px;
			padding: 10px;
			padding-right: 0;
			background-color: white;
			border-radius: 3px;
			border: thin solid #ddd;
			padding-bottom: 30px;
			max-height: 40px;
		}

			.tagList textarea {
				position: absolute;
				height: 11pt;
				width: 202px;
				resize: none;
				overflow: hidden;
				bottom: 0;
				left: 0;
				padding: 3px;
				font-size: 11pt;
				color: #5e5e5e;
				opacity: 0.8;
				background: -moz-linear-gradient(bottom,rgba(255, 255, 255,...

JavaScript

(function() {
/*Prototype script: */
		
		var TagEditor = function (tagListItem) {
			this.edit = false;
			// this TagEditor for ref below since "this" in events refers to source element
			var tE = this,
				// example technique define local var and property of TagEditor
				tL = this.tagList = tagListItem,
				tI = this.tagInput = this.tagList.querySelectorAll('[name=tagInput]')[0];
			this.tagOutput = this.tagList.querySelectorAll('[name=tags]')[0];
			// event listeners
			tL.addEventListener('mouseout', this.tagListMouseOut);
			tI.addEventListener('keyup', function (e) { tE.tagOnKeyPress(e); });
			tI.addEventListener('focus', function (e) { tE.changeSize(e); });
			tI.addEventListener('blur', function (e) { tE.changeSize(e); });
			// using the local var tl which is this.tagList
			for (var i = 2; i < tL.childNodes.length; i++) {
				tL.childNodes[i].addEventListener('click', function (e) { tE.tagOnClick(e, this); });
				tL.childNodes[i].addEventListener('mousemove', function (e) { tE.tagOnMouseMove(e, this); });
				tL.childNodes[i].addEventListener('mouseout', this.tagOnMouseOut);
			}
		};

		TagEditor.prototype = {
			tagOnKeyPress: function (event) {
				var tE = this;
				var keyCode = event.keyCode,
					tagInputValue = tE.tagInput.value.trim(),
					tO = this.tagOutput;
				if (tagInputValue.length !== 0) {
					if (tE.edit) {
						if (keyCode === 13) {
							tE.edit = false;
							editTag.style.borderColor = '#ddd';
							tagInput.value = '';
							return;
						}
						tO.value = tO.value.replace(editTag.innerHTML, tagInputValue);
						newTag = editTag;
					} else {
						if (keyCode !== 13) return;
						tO.value = tO.value + tagInputValue + ';';
						var newTag = document.createElement('div');
						newTag.addEventListener('click', function (e) { tE.tagOnClick(e, this); });
						newTag.addEventListener('mousemove', function (e) { tE.tagOnMouseMove(e, this); });
						newTag.addEventListener('mouseout',...