JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<form name="input" class="form">
     <h2>Details</h2>

    <fieldset>
        <legend>Requirments</legend>
        <div class="copies"></div>
        <div class="line">
            <input class="current" type="text" name="content" placeholder="Requirement" />
            <input type="button" value="Add" class="add" />
        </div>
    </fieldset>
    <fieldset>
        <legend>Qualifications</legend>
        <div class="copies"></div>
        <div class="line">
            <input class="current" type="text" name="content" placeholder="Requirement" />
            <input type="button" value="Add" class="add" />
        </div>
    </fieldset>
    <fieldset>
        <legend>Benefits</legend>
        <div class="copies"></div>
        <div class="line">
            <input class="current" type="text" name="content" placeholder="Requirement" />
            <input type="button" value="Add" class="add" />
        </div>
    </fieldset>
</form>

CSS

input[type=text] {
    outline: 0;
    width: 300px;
    line-height: 16px;
}
.current {
    border: solid 1px gray;
}
.current:hover {
    border: solid 1px blue;
}
.current:focus {
    border: solid 1px blue;
}
.accepted {
    border: 0px;
}
.accepted:hover {
    border: dashed 1px gray;
}
.accepted:focus {
    border: dashed 1px blue;
}
fieldset {
    border:0;
}

JavaScript

var details = {
    maxFields: 10,
    form: "",
    init: function (el) {
        this.form = $(el);
        this.bindEvents();
    },
    bindEvents: function () {
        this.form.on("click", ".remove", $.proxy(this.removeCopy, this));
        this.form.on("click", ".add", $.proxy(this.appendCopy, this));
        this.form.on("keyup", ".accepted", $.proxy(this.focusOnEnter, this));
        this.form.on("keyup", ".current", $.proxy(this.addCopyOnEnter, this));
    },
    appendCopy: function (event) {
        var val = this._getValue(event),
            $copyContainer = this._getCopyContainer(event),
            $copy;
        // if one of those is true then we are doomed
        if (this._isValueEmpty(val) || this._isMaxReached($copyContainer)) {
            alert("we are doomed");
        } else {
            // go on and create our copy
            $copy = this.createCopy(val);
            $copyContainer.append($copy);
        }
    },
    removeCopy: function (event) {
        $(this._getCopyContainer(event).context).parent().remove();
    },
    createCopy: function (value) {
        // create our placeholder
        var $line = $("<div>").addClass("copy");
        // create the copy input
        var $accepted = $("<input>")
            .addClass("accepted")
            .attr("type", "text")
            .attr("value", value);
        // create the delete button
        var $deleteButton = $("<input>")
            .attr("type", "button")
            .attr("value", "X")
            .addClass("remove");
        // return our copy object 

        return $line.append($accepted, $deleteButton);
    },
    focusOnEnter: function (event) {
        if (event.which === 13) {
            this._getCurrent(event).focus();
        }
    },
    addCopyOnEnter: function (event) {
        if (event.which === 13) {
            this.appendCopy(event);
        }
    },
    _isValueEmpty: function (val) {
        return (val === "") ? true : false;
    },
    _isMaxReached:...