I have created a script to create form fields with javascript, each field has a button to remove it but I want to make available a way to move the fields around so they are ordered even after the field was created so if i have

form
label for x input x
label for y input y
label for z input z
form

how could I make it so the user is able to move them around to which ever order they like?

This is my current code however is not finished.

Code HTML4Strict:
<html>
<head>
<style type="text/css" >
p, h1, form, button{border:0; margin:0; padding:0;}
#form_create {
	margin:0 auto;
	width:500px;
	padding:14px;
	}
#form_create label{
	display:block;
	font-weight:bold;
	text-align:right;
	width:140px;
	float:left;
	}
#form_create input {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #aacfe4;
	width:200px;
	margin:2px 0 20px 10px;
	}
#form_create select{
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #aacfe4;
	width:200px;
	margin:2px 0 20px 10px;
	}
#form_create textarea{
	float:left;
	padding:4px 2px;
	margin:2px 0 20px 10px;
	}
#form_create button {
	clear:both;
	margin-left:150px;
	width:125px;
	height:31px;
	background:#666666 url(img/button.png) no-repeat;
	text-align:center;
	line-height:31px;
	color:#FFFFFF;
	font-size:11px;
	font-weight:bold;
	}
#form_create span{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#form_create p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
</style>
<style type="text/css" >
p, h1, form, button{border:0; margin:0; padding:0;}
#form_preview {
	margin:0 auto;
	width:600px;
	padding:14px;
	}
#form_preview label{
	clear:both;
	display:block;
	font-weight:bold;
	text-align:right;
	width:140px;
	float:left;
	}
#form_preview input{
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #aacfe4;
	width:200px;
	margin:2px 0 20px 10px;
	}
#form_preview select{
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #aacfe4;
	width:200px;
	margin:2px 0 20px 10px;
	}
#form_preview button {
	clear:both;
	margin-left:150px;
	width:125px;
	height:31px;
	background:#666666 url(img/button.png) no-repeat;
	text-align:center;
	line-height:31px;
	color:#FFFFFF;
	font-size:11px;
	font-weight:bold;
	}
#form_preview span{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#form_preview p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#form_preview div {
    background: black;    
    float: left;    
    height: 25px;
    margin-top: 3px;
    margin-left: 5px;
}
#form_preview div a, a:link, a:visited, a:active{
    text-decoration:none;
}
#form_preview div span{
	color: red;
	font-size: 14px;
    font-weight: bold;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	padding-top:4px;
	}
</style>
<script type="text/javascript" >
function oc(a){
	var o = {};
	for(var i=0;i<a.length;i++){
		o[a[i]]='';
		}
	return o;
	}
var fields_array = new Array();
var fields_array_counter = 0;
var input_a = new Array('button', 'checkbox', 'file', 'hidden', 'password', 'radio', 'reset', 'submit', 'text')
var last_created_1 = '';
var last_created_2 = '';
var last_created_3 = '';
var last_created_4 = '';
var last_created_5 = '';
var last_created_counter = 1;
var groupname_a = new Array();
var groupname_counter = 0;
function form_create_input(){
	var label = document.getElementById('label').value;
	var label_loc = document.getElementById('label_loc').value;
	var groupname = document.getElementById('groupname').value;
	var groupnamelegend = document.getElementById('groupnamelegend').value;
	var field_name = document.getElementById('field_name').value;
	var type = document.getElementById('type').value;
	var form_preview = document.getElementById('form_preview').innerHTML;
	var button_remover = '<div id="' + field_name + 'button_remove" ><a href="#" onclick="remove_field(' + "'" + field_name + "'" + ')" ><span ><<== Remove field</span></a></div>';
	last_created_5 = last_created_4;
	last_created_4 = last_created_3;
	last_created_3 = last_created_2;
	last_created_2 = last_created_1;
	last_created_1 = form_preview;
	if (groupname != ''){
		groupname_a[groupname_counter] = document.getElementById('groupname').value;
		groupname_counter ++;
		}
	if (type in (oc(input_a))){
		var newfield = '<input type="' + type + '" id="' + field_name + '" />';
		if (label != ''){
			var newlabel = '<label id="' + field_name + 'l" for"' + field_name + '" >' + label + '</label>';
			}
		else{var newlabel = ''}
		if (newlabel != ''){
			if (label_loc == 1){
				newfield = newlabel + newfield;
				}
			}
		}
	fields_array[fields_array_counter] = new Array(groupname, groupnamelegend, newfield);
	fields_array.sort();
	fields_array_counter ++;
	last_created_counter = 1;
	this_fieldset = '';
	document.getElementById('form_preview').innerHTML = form_preview + newfield + button_remover;
	}	
function revert_change(){
	if (last_created_counter == 1){
		document.getElementById('form_preview').innerHTML = last_created_1;
		last_created_counter ++;
		}
	else if (last_created_counter == 2){
		document.getElementById('form_preview').innerHTML = last_created_2;
		last_created_counter ++;
		}
	else if (last_created_counter == 3){
		document.getElementById('form_preview').innerHTML = last_created_3;
		last_created_counter ++;
		}
	else if (last_created_counter == 4){
		document.getElementById('form_preview').innerHTML = last_created_4;
		last_created_counter ++;
		}
	else if (last_created_counter == 5){
		document.getElementById('form_preview').innerHTML = last_created_5;
		last_created_counter ++;
		}
	else {
		alert('Sorry canīt undo, use the red x on the field that you like to delete.');
		}
	}
function remove_field(id){
	var parent = document.getElementById('form_preview');
	var label = document.getElementById(id + 'l');
	var field = document.getElementById(id);
	var button = document.getElementById(id + 'button_remove');
	parent.removeChild(label);
	parent.removeChild(field);	
	parent.removeChild(button);	
	}
function format_comma(){
	var textarea = document.getElementById('sel_check_opt').input;
 
	}
</script>
</head>
<body>
<form id="form_create" >
<fieldset name="input" ><legend>New field creator</legend>
<p>Leave empty any part that does not apply to your field.</p>
<label for="label">Text label<span>Text describing field</span></label><input type="text" id="label" />
<label for="label_loc">Text label possition:<span>Before or after the text?</span></label><select id="label_loc" /><option value="1" >Before</option><option value="2" >After</option></select>
<label for="groupname">Group name<span>No spaces.</span></label><input type="text" id="groupname" /><br/>
<label for="groupnamelegend">Group name:<span>Group name to display</span></label><input type="text" id="groupnamelegend" />
<label for="field_name">Unique name<span>For the field, no spaces</span></label><input type="text" id="field_name" />
<label for="type">Type to add:<span>The type of field to add</span></label>
<select id="type" >
<option value="button" >button</option>
<option value="checkbox" >checkbox</option>
<option value="file" >file</option>
<option value="hidden" >hidden</option>
<option value="password" >password</option>
<option value="radio" >radio</option>
<option value="reset" >reset</option>
<option value="select" >select</option>
<option value="submit" >submit</option>
<option value="text" >text</option>
<option value="textarea" >textarea</option>
</select>
<label for="sel_check_opt">Options<span>For select and checkbox.</span></label><textarea id="sel_check_opt" cols="25" rows="5" >Type them like this: option_1, option_2, option_3, etc</textarea>
<button type="submit" onclick="form_create_input(); return false;" >Add</button><br/><br/>
<button type="submit" onclick="revert_change(); return false;" >Undo Last</button>
</fieldset>
</form>
<div id="form_preview" >
</div>
</body>
</html>