JSFiddle - React, Tailwind, and code Playground

by jasarjasu786

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css">
<label>Quantity</label><input type="text" id="qty" name="qty" />

<div id="newFields"></div>

CSS

#newFields input {
    display:block;
}

JavaScript

$(function() {

    var input = $('<input type="text" />');
    var newFields = $('');

    $('#qty').bind('blur keyup change', function() {
        var n = this.value || 0;
        if (n+1) {
            if (n > newFields.length) {
                addFields(n);
            } else {
                removeFields(n);
            }
        }
    });

    function addFields(n) {
        for (i = newFields.length; i < n; i++) {
            var newInput = input.clone();
            newFields = newFields.add(newInput);
            newInput.appendTo('#newFields');
        }
    }

    function removeFields(n) {
        var removeField = newFields.slice(n).remove();
        newFields = newFields.not(removeField);
    }
});