JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://spedwards.cz.cc/hero/assets/bootstrap.min.js"></script>
<script src="http://spedwards.cz.cc/hero/assets/typeahead.js"></script>
<script src="http://spedwards.cz.cc/hero/assets/bootstrap-tokenfield.js"></script>
<link rel="stylesheet" href="http://spedwards.cz.cc/hero/assets/bootstrap.min.css">
<link rel="stylesheet" href="http://spedwards.cz.cc/hero/assets/bootstrap-tokenfield.min.css">
<link rel="stylesheet" href="http://spedwards.cz.cc/hero/assets/jquery-ui.css">
<div id="content">
    <input id="heroes" type="text" class="form-control" id="tokenfield-typeahead" />
    <button id="all" onClick="allt()">Select/Deselect All</button>
    <button id="random" onClick="random()">Random</button>
    
    <!-- Example Link to Prove Point -->
    <a href="javascript:allt()">Example: Select/Deselect All</a>
</div>

CSS

#header, #content {
    margin: 3em;
}
button {
    margin: 1em;
}

JavaScript

var heroes = [
    'Black Panther', 'Black Widow', 'Cable', 'Captain America', 'Colossus', 'Cyclops', 'Daredevil', 'Deadpool', 'Emma Frost', 'Gambit',
    'Ghost Rider', 'Hawkeye', 'Hulk', 'Human Torch', 'Iron Man', 'Jean Grey', 'Loki', 'Luke Cage', 'Ms Mavel', 'Nightcrawler', 'Punisher',
    'Rocket Raccoon', 'Scarlet Witch', 'Spider-Man', 'Squirrel Girl', 'Storm', 'Thing', 'Thor', 'Wolverine'];

var a = false;

$(document).ready(function () {
    $('#heroes').tokenfield({
        autocomplete: {
            source: ['Black Panther', 'Black Widow', 'Cable', 'Captain America', 'Colossus', 'Cyclops', 'Daredevil', 'Deadpool', 'Emma Frost', 'Gambit',
                'Ghost Rider', 'Hawkeye', 'Hulk', 'Human Torch', 'Iron Man', 'Jean Grey', 'Loki', 'Luke Cage', 'Ms Mavel', 'Nightcrawler', 'Punisher',
                'Rocket Raccoon', 'Scarlet Witch', 'Spider-Man', 'Squirrel Girl', 'Storm', 'Thing', 'Thor', 'Wolverine'],
            delay: 100
        }
    });

    $('#heroes').tokenfield();
});

function allt() {
    if (!a) {
        $('#heroes').tokenfield('setTokens', heroes);
        a = true;
    } else {
        $('#heroes').tokenfield('setTokens', ' ');
        a = false;
    }
}