JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Multiple values</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="http://jqueryui.com/jquery-1.7.2.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.position.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.autocomplete.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/demos.css">
    <script>
  
    </script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
    <label for="tags">Tag programming languages: </label>
    <input id="tags" size="50" />
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Usage: Type something, eg. "j"
</div><!-- End demo-description -->

</body>
</html>

JavaScript

$(function() {
    var usedItems = [];

    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
        ];

    function split(val) {
        return val.split(/,\s*/);
    }

    function extractLast(term) {
        return split(term).pop();
    }


    $("#tags")
    // don't navigate away from the field on tab when selecting an item
    .bind("keydown", function(event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    }).autocomplete({
        minLength: 0,
        source: function(request, response) {
      var tempTags = $('#tags').val().split(',');
           // alert(tempTags);
       var newNonDuplicatetag1 = $.grep(usedItems, function(el){return $.inArray(el, tempTags) != -1}); 
      var newNonDuplicatetag = $.grep(availableTags, function(el){return $.inArray(el, newNonDuplicatetag1) == -1}); 
            // delegate back to autocomplete, but extract the last term
            response($.ui.autocomplete.filter(
            newNonDuplicatetag, extractLast(request.term)));
        },
        focus: function() {
            // prevent value inserted on focus
            return false;
        },
        select: function(event, ui) {
            var terms = split(this.value);
            // remove the current input
            terms.pop();
            // add the selected item
            usedItems.push(ui.item.value);
           // alert(usedItems[1]);
            terms.push(ui.item.value);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value =...