JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div class="wrap">
    <input id="input" type="text" placeholder="search">
    <button id="search" type="button">Add</button>
    <div class="tags-wrap">
        <div id="tags"></div>
        <button id="clear">Clear</button>
    </div>
</div>

CSS

.tags-wrap {
    background-color:#567;
    padding:10px;
}
#tags > span {
    background-color:#F20;
    color:#fff;
    padding:5px;
    margin-right:5px;
}

JavaScript

$('#search').on('click', function () {

    var markup = inputTags($('#input').val());

    $('#tags').append(markup);
    $('input').val('');

});

$('#clear').on('click', function () {

    $('#tags').html("");

});

function inputTags(input) {

    input = $.trim(input);

    console.log(input.length);

    if (input.length === 0) return;

    var res = input.split(" ");
    var output = "";

    for (i = 0; i < res.length; i++) {
        output = output + "<span>" + res[i] + "</span>";
    }

    console.log(output)
    return output;
}

$('#input').on('keyup', function (e) {
    if (e.keyCode === 13) {
        $('#search').click();
    }
});