JSFiddle - React, Tailwind, and code Playground

HTML

<div class="holder">
    <span class="test targetLeft"></span>
    <input class="test taggingSystem" type="text" />
    <span class="test targetRight"></span>
</div>

CSS

.holder {
    border: 1px solid #000;
    padding: 2px 4px;
    width: 400px;
}

input {
    width: auto;
}

.tagHolder {
    color: #3E6D8E;
    background-color: #E0EAF1;
    border-bottom: 1px solid #b3cee1;
    border-right: 1px solid #b3cee1;
    padding: 3px 4px;
    margin: 2px 2px 2px 0;
    font-size: 10pt;
    line-height: 2.4;
    white-space: nowrap;
}

JavaScript

$(document).ready(function() {
	
	tags = [];
    
    $(".taggingSystem").keyup(function (e) {
		
		if ($(".taggingSystem").val().substring(0, 1) == " ") {
			$('.taggingSystem').val('');
			return false;
		}
		
		// GET THE VALUE OF THE INPUT FIELD
	    var value = $('.taggingSystem').val().replace(/\s/g,"");
	    
	    // IF USER IS HITTING THE BACKSPACE KEY
	    if (e.which === 8 && value === "") {
	        var text = $('.targetLeft .tagHolder:last-child .tagValue').text();
	        $('.targetLeft .tagHolder:last-child').remove();
	        $(this).val(text);
	    }
	    
	    // IF USER IS HITTING THE SPACE KEY
	    if (e.which === 32 && value != "") {
	        $(".targetLeft").append('<span class="test tagHolder"><span class="test tagValue">'  + value + '</span><span class="test cross">X</span></span>');
	        tags.push(this.value);
	        this.value = "";
            alert('Tags-Array: ' + tags);
	    }
	});
	
	$(document).on('click','.targetLeft .tagHolder',function() {
		
		var clickedValue = $(this).prev('.tagHolder').find('.tagValue').text();
		
		tags.splice(clickedValue, 1);
		
		// GET THE VALUE OF THE INPUT FIELD
	    var value = $('.taggingSystem').val();
	    
	    if ($(".taggingSystem").val().substring(0, 1) != "") {
	    	$(".targetRight").prepend('<span class="test tagHolder"><span class="test tagValue">'  + value + '</span><span class="test cross">X</span></span>');
		}
	    
	    var text = $(this).find('.tagValue').text();
	    var following = $(this).nextAll();
	    
	    following.remove();
	    $(".targetRight").prepend(following);
	    
	    $(this).remove();
	    $('.taggingSystem').val(text);
	    
	});
	
	$(document).on('click','.targetRight .tagHolder',function() {
		
	    var value = $('.taggingSystem').val();
	    
	    if ($(".taggingSystem").val().substring(0, 1) != "") {
	    	$(".targetLeft").append('<span class="test tagHolder"><span class="test tagValue">'  + value + '</span><span class="test...