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);
  }
});