javascript - first box still at top other box below the first box using jquery -

first box @ top other boxes below first box step step.

** [jsfiddle]https://jsfiddle.net/baloch007/9jo8tka5/14/** 

have @ this:

	var = 2;  	$('input[type=button]').click(function() {  	  $('#wrapper').append("<span>box " + + "</span>");  	  i++;      if(i >= 8){      	$(this).hide();      }  	})

span {    width: 40px;    background: red;    border: 1px solid black;    display: block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div id="wrapper">    <span>box 1</span>  </div>  <input type='button' value='+' />