JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<div class="row">
    <input type="text" />
    <input type="checkbox" />
    <input type="radio" />
    <select>
        <option>a</option>
        <option>b</option>
    </select>
</div>
<a class="clone" href="#">Clone</a>
<div class="queueList"></div>

<div class="row">
    <input type="text" />
    <input type="checkbox" />
    <input type="radio" />
    <select>
        <option>a</option>
        <option>b</option>
    </select>
</div>
<a class="clone" href="#">Clone</a>
<div class="queueList"></div>

CSS

.queueList {
    border: solid 1px red;
}

JavaScript

var Form = function() {};

Form.Stack = new Class({

    Implements: [Events],

    initialize: function(row) {
        this.row = row;
        this.setup();
    },

    setup: function() {
        this.selector = 'input[type=text], input[type=checkbox], input[type=radio], select, textarea';
        this.cloner = this.row.getNext('.clone');
        this.queueList = this.cloner.getNext('.queueList');
        this.cloneTrigger();
    },

    cloneTrigger: function() {
        this.cloner.addEvents({
            click: function(event) {
                event.stop();
                this.cloneFields();
            }.bind(this)
        });
    },

    cloneFields: function(event) {
        this.row.getElements(this.selector).each(this.storeValues);
        var clone = this.row.clone();
        this.addValues(clone).inject(this.queueList, 'top');
        this.clearValues(this.row);
        this.addRemove(clone);
    },

    addRemove: function(fieldset) {
        var removeLink = Elements.from('<a title="" href="#">Remove</a>');
        removeLink.addEvents({
            click: this.removeTrigger
        });
        removeLink.inject(fieldset);
    },

    removeTrigger: function(event) {
        event.stop();
        this.getParent().destroy();
    },

    clearValues: function(fieldset) {
        fieldset.getElements(this.selector).each(function(field) {
            field.checked = false;
            field.set('value', '');
            field.selectedIndex = 0;
        });
    },

    storeValues: function(field) {
        if (field.get('tag') === 'select') {
            field.set('data-selected-index', field.selectedIndex);
        } else {
            if (field.get('type') === 'checkbox') {
                field.set('data-checked', field.checked);
            } else if (field.get('type') === 'radio') {
                field.set('data-checked', field.checked);
            } else {
                field.set('data-value', field.get('value'));
            }
        }
  ...