JSFiddle - React, Tailwind, and code Playground

by siyegen

HTML

<script src="https://github.com/loopj/jquery-tokeninput/raw/master/src/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="https://github.com/loopj/jquery-tokeninput/raw/master/styles/token-input.css">
<div class="filterOption">
    <a href="#" class="filterBox">Trade</a> =
    <span class="q_status">ALL</span><br />
    <span class="clearLink q_box">
        <input type="text" rel="Trade" name="filter.trade" class="tokenAuto" />
        <a class="clearLink" href="#">Clear</a>
    </span>
</div>

CSS

.hidden {
    display: none;   
}

JavaScript

$('.tokenAuto').each(function() {
    var field_type = $(this).attr('rel');
    var name = $(this).attr('name');
    var template = $('<option>').attr('selected', 'selected');
    $(this).removeAttr('name');
    var r_ids = $(this).val();
    $('.tokenAuto').tokenInput([{
        id: 7,
        name: "Ruby"},
    {
        id: 11,
        name: "Python"},
    {
        id: 13,
        name: "JavaScript"},
    {
        id: 47,
        name: "Java"}], {
        onAdd: function(item) {
            $(this).closest('.q_box').find('select[name="' + name + '"]').append(template.clone().attr('value', item.id));
        },
        onDelete: function(item) {
             $(this).closest('.q_box').find('select[name="' + name + '"]').find('option[value="'+item.id+'"]').remove();
        }
    });
    $(this).closest('.q_box').append($('<select>').attr({
        'class': 'hidden',
        'name': name
    }));
});