Auto Add Form/Generate Dynamic Autoform?

[Velociraptor]

Hi,

I'm new to coding and looking for a way to make auto add form. The one like in admin area for reserved name, censored words, and headlines.



The problem is I don't know what it's called.
So just type and another form will be ready.

I found this one: jsfiddle.net/jCMc8/8/
But that one is awkward, Upon clicking on the next one, the mouse cursor moved as if pushed to the next one before returning to current position. Also it keeps adding new form just with a click.


HTML

<section>
    <div id="initRow">
        <input name="multifield" placeholder="Value">
    </div>
</section>

CSS

section {
    padding: 10px;        
}

section > div {
    padding: 5px;
    width: 100%;
}

Java Script

function addRow(section, initRow) {
    var newRow = initRow.clone().removeAttr('id').addClass('new').insertBefore(initRow),
        deleteRow = $('<a class="rowDelete"><img src="http://i.imgur.com/ZSoHl.png"></a>');

    newRow
        .append(deleteRow)
        .on('click', 'a.rowDelete', function() {
            removeRow(newRow);
        })
        .slideDown(300, function() {
            $(this)
                .find('input').focus();
        })
}

function removeRow(newRow) {
    newRow
        .slideUp(200, function() {
            $(this)
                .next('div:not(#initRow)')
                    .find('input').focus()
                    .end()
                .end()
                .remove();
        });
}

$(function () {
    var initRow = $('#initRow'),
        section = initRow.parent('section');

    initRow.on('focus', 'input', function() {
        addRow(section, initRow);
    });
});

I prefer proboards design, a new one will be ready only if you input a text/data.


Thank you in advance.

[Peter]

Here is a rough example to get you started...

codepen.io/PopThosePringles/pen/gxvXeL

[Velociraptor]

Thank you very much !!!!