JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://aehlke.github.com/tag-it/js/tag-it.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="http://aehlke.github.com/tag-it/css/jquery.tagit.css" rel="stylesheet" type="text/css">


<input type="text" id="tagInp" />


<p>Output:</p>
<p id="tags_output"></p>

JavaScript

var $tagInp = $("#tagInp");

$tagInp.tagit({
    allowSpaces: true,
    onTagAdded: function(event, tag) {
        updateOutput();
    },
    onTagRemoved: function(event, tag) {
        updateOutput();
    }
})
.next(".tagit").sortable({
     update: function(event, ui) {
         updateInput($(this).prev("input"));
    }
});


updateInput = function(inp){
    var tags = [];
    inp.next(".tagit").find(".tagit-label").each(function(index, element) {
        tags.push($(this).text());
    });

    inp.val(tags);
    
    updateOutput();
 }
    
updateOutput = function(){
   $("#tags_output").html($tagInp.val());
}