JSFiddle - React, Tailwind, and code Playground

by alessandro_pezzato

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-6">
        <h1>Nomi</h1>
        <form role="form">
            <div class='names-body'></div>
            <div class='names-footer'>
                <button id="submit" type="submit" class="btn btn-default">Invia</button>
            </div>
        </form>
    </div>
    <div class="col-xs-3"></div>
</div>

CSS

.del-btn.disabled span {
    visibility: hidden;
}

JavaScript

$(function () {
    var names = {};
    var nextId = 0;

    var appendNewField = function () {
        $('.names-body').append(createField());
    };

    var createField = function () {
        var id = nextId++;
        var last = true;
        names[id] = {};

        var $el = $('<div/>')
            .addClass('input-group form-group');

        var remove = function (e) {
            if (e) e.preventDefault();
            if (last) return;
            $el.fadeOut(function () {
                $el.remove();
            });
            delete names[id];
        }

        var change = function (e) {
            names[id].val = $input.val();
            if (last) {
                last = false;
                appendNewField();
                $delBtn.removeClass('disabled');
            } else if ($input.val() == '') remove();
        };

        var $input = $('<input type="text"/>')
            .attr('placeholder', 'Aggiungi...')
            .addClass('form-control')
            .keyup(change);

        var $delBtn = $('<button type="button"><span class="glyphicon glyphicon-remove"></span></button>')
            .click(remove)
            .addClass('btn btn-default disabled del-btn');

        $el.append($input)
            .append($('<span class="input-group-btn"/>').append($delBtn));
        
        names[id].$el = $el;

        return $el;
    };

    var send = function (data) {
        if (!data.length) return;
        console.log(data);
        // invia ajax data
    };

    $('#submit').click(function (e) {
        e.preventDefault();
        send($.map(names, function (item) {
            return item.val;
        }));
    });

    appendNewField();
});