JSFiddle - React, Tailwind, and code Playground

HTML

<div id="demooutput"  id="demo"><span class="tag">A</span></div>
    <span class="demooutput">
        <a href="#" class="button orange"> A</a>
        <a href="#" class="button orange"> B</a>
        <a href="#" class="button orange"> C</a>
        <a href="#" class="button orange"> D</a>
        <a href="#" class="button orange"> E</a>   
        

    </span>
        <span id='delete' container="">×</span>

CSS

#delete
{
    display:block;
    position:absolute;
    left:0;
    
}
#demooutput{width:200px;height:40px;border:1px red solid;}
select,input{margin:10px}

a{text-decoration: none;}
.button {
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3) inset;
    color: #292929;
    cursor: pointer;
    font-family: 'Open Sans',sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    height: 28px;
    max-height: 40px !important;
    padding: 4px 14px 5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.button.orange {
    background:#E3B822;
    border: 1px solid #C79F16;
    padding: 5px 10px !important;
}

JavaScript

$('.demooutput a').click(function(){
        $('#demooutput').html($('#demooutput').html() + ' <span class="tag">' + $(this).html() +"</span>");
        return false;
    });

			$('body').on({
				mouseenter:function()
			{
                  $('#delete').fadeIn();
		    	$('#delete').css('left',$(this).position().left + $(this).width() + $('#delete').width() + 'px');
                $('#delete').css('top',$(this).position().top - 5 + 'px')
			}
			,mouseleave:function()
			{

			}},'.tag');