$(document).ready(function () {  
	$("#princesses").change(function() {
		//finds out how many instances of princesses we currently have
		var num = $('.input').length;

		//how many princesses there are from the select box
		var needed = $("#princesses").attr('value');

		//there's already one input box for princess1 name so start on the next in line
		var current = $('.input').length;
		
		//if there are more instances than what was selected in the drop down menu
		if(current > needed){
			var i = 1;
			//number of elements we need to remove
			var tmp = num - needed;

			while(i <= tmp){
				$('.princessBox:last').empty().remove();
				i++;
			}
		}

		var current = $('.input').length + 1;

		if(current <= needed){
			while(current <= needed){
				$("#princess1").clone().insertAfter("#princess" + (current - 1)).attr('id', "princess" + current);
				$("#princess" + current + " label:eq(0)").attr('for', "princess" + current).text("Princess #" + current + " Name");
				$("#princess" + current + " label:eq(1)").attr('for', "shirtSize" + current).text("Tee Shirt Size");
				$("#princess" + current + " input:gt(0)").attr('name', "shirtSize" + current);	
				current++;
			}
		}
	});
});