Why won't the newly created input tags stay on page?

Question

Im trying to create new input tags based on the number the user enters. My code will create the correct amount of tags, but they get removed almost immediately. Why?

<form>
 <input type='text' id='input' />
 <button>Submit</button>
</form>
<div id="box">
</div>

<script>
$(document).ready(function() {
 $('button').click(function() {
  var x = $('#input').val(); 
  for(var i=0 ; i < x; i++) {
        $('<input type="text" /><br>').prependTo('#box');
    };
 });
});

</script>

Answer 1

call preventDefault on the event to stop the button action from firing

$('button').click(function(e) {
   e.preventDefault();
   var x = $('#input').val(); 
   for(var i=0 ; i < x; i++) {
      $('<input type="text" /><br>').prependTo('#box');
   };
});

FIDDLE

Answer 2

Change your existing button to an input with an id and use the id in the JS. Your problem is the form is being submitted when you click button.

http://jsfiddle.net/Delorian/65gLvfdx/

<input type="button" id="update" value="Submit" />