Question

I want to have a form input that one would enter a number and click the button next to it so it would “Add” the former number of Inputs with each its own name.

1. Enter Number
2. Click Go Button or whatever
3. Outputs on same page that number of inputs (creates new inputs)

I have tried this which only gives an ADD one at a time feature:

$(function() {
    var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work

    $('a#add').click(function() { // when you click the add link
        $('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
        i++; //after the click i will be i = 3 if you click again i will be i = 4
    });

    $('a#remove').click(function() { // similar to the previous, when you click remove link
    if(i > 1) { // if you have at least 1 input on the form
        $('input:last').remove(); //remove the last input
        i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
    }
    });

    $('a.reset').click(function() {
    while(i > 2) { // while you have more than 1 input on the page
        $('input:last').remove(); // remove inputs
        i--;
    }
    });

}); 

<a href="#" id="add">Add</a>  
<a href="#" id="remove">Remove</a>  
<input type="text" value="1" />

Answer 1

Something like this?

<script>
  $(document).ready(function(){
    $('#addButton').click(function(){
      var count = parseInt($('#quantity').val());
      var newHTML = [];
      for(var i=0;i<count;i++){
        newHTML.push('<input type="text"/><br/>');//or whatever content you want
      }
      $('#sandbox').html(newHTML.join(''));
    });
  });
</script>



<input type="text" id="quantity" value=""/>
<input type="button" id="addButton" value="Add"/>
<div id="sandbox"></div>