JSFiddle - React, Tailwind, and code Playground

by bohdantheone

HTML

<form id="multi">
    <div>
        <label>Tag</label>
        <input class="tag" type="text" name="" type="text" /> <a href="#" data-action="add">add</a>
 <a href="#" data-action="delete">delete</a>

    </div>
    <input type="submit" value="save">
</form>

CSS

form {
    font-family: helvetica, arial, sans-serif;
    font-size: 11px;
}
form div {
    margin-bottom:10px;
}
form a {
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid #444444;
    background: #555555;
    color:#f7f7f7;
    text-decoration:none;
    vertical-align: middle;
}
form a:hover {
    color:#ffffff;
    background:#111111;
}
#multi label {
    margin-left:20px;
    margin-right:5px;
    font-size:12px;
    background:#f7f7f7;
    padding: 4px 10px;
    border:1px solid #cccccc;
    vertical-align: middle;
}
#multi input[type="text"] {
    height:22px;
    padding-left:10px;
    padding-right:10px;
    border:1px solid #cccccc;
    vertical-align: middle;
}
#multi input[type="submit"] {
    margin-left:20px;
    border:none;
    background:#222222;
    outline:none;
    color:#ffffff;
    padding: 4px 10px;
    font-size:12px;
}

JavaScript

jQuery(function ($) {

    var multiTags = $("#multi");

    function handler(e) {
        var jqEl = $(e.currentTarget);
        var tag = jqEl.parent();
        switch (jqEl.attr("data-action")) {
            case "add":
                tag.after(tag.clone().find("input").val("").end());
                break;
            case "delete":
                tag.remove();
                break;
        }
        return false;
    }

    function save(e) {
        var tags = multiTags.find("input.tag").map(function () {
            return $(this).val();
        }).get().join(',');
        alert(tags);
        return false;
    }

    multiTags.submit(save).find("a").live("click", handler);
});