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

// detail object that handles our form
var details = {
    maxFields: 10,
    form: "",
    // setup our form property and bind all relevant events
    init: function(el) {
        this.form = $(el);
        this.bindEvents();
    },
    // delegate all events to details object methods
    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));
    },
    // add a copy
    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).remove(".copy");
    },
    /**
     *  this can be further refactored, depending on how dynamic we want it
     */
    createCopy: function(value) {
        // create our placeholder
        var $copy = $("<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 $copy.append($accepted,$deleteButton);
    },
    // handle keyup event from .copy
    focusOnEnter: function(event) {
        if (event.which == 13) {
 ...