JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="select-box">
  <input name="artist-select" class="artist-select">
</div>
<hr>
<div id="output"></div>

CSS

.select-box{
  width:500px;
  height:30px;
  border:solid 1px black;
  overflow:hidden;
}
.artist-select{
  height:30px;
  padding:0;
  margin:0;
  width:500px;
  background-color:transparent;
  border:none;
  box-sizing:border-box;
  padding:0px 4px;
  float:left;
  outline: none;
}
.selected-option{
  width:96px;
  float:left;
  height:26px;
  line-height:26px;
  font-size:14px;
  background-color:#c3c3c3;
  margin-top:2px;
  margin-right:2px;
  border:solid 1px red;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing:border-box;
  padding:0 5px;
  cursor:pointer;
}
.selected-option:nth-child(1) {
  margin-left:2px;
}

JavaScript

$(document).keydown(function(e) {
    if ($('.artist-select').is(':focus') && e.keyCode === 13) {
    		var value = $('.artist-select').val(),
        		html  = '<div class="selected-option selected-4">' + value + '</div>',
            count = parseInt($('.selected-option').length) + 1,
            width = 500 - (count * 100);

				$('.artist-select').before(html).css({
        		'width' : width + 'px'
        }).val('');
        
        if (count >= 5) {
        		$('.artist-select').trigger('blur');
        }
    }
});

$(document).on('click', '.selected-option', function() {
		$(this).remove();

		$('.artist-select').css({
    		'width' : (500 - parseInt($('.selected-option').length * 100)) + 'px'
   	}).trigger('focus');
});