Dynamic Form Problem
So ive been trying to get this dynamic form working but ive run into a problem with making the table.

 
    <html>

    <head>
    <script language="Javascript" type="text/javascript"> 

    //Add more fields dynamically.
    function addField(area,field) 
    {
        //Prevent older browsers from getting any further.
	    if(!document.getElementById) return; 
        //Select area.
	    var field_area = document.getElementById(area); 
        //Get all the input fields in the given area.
	    var all_inputs = field_area.getElementsByTagName("input"); 

	    //Find the count of the last element of the list.
	    //It will be in the format '<field><number>'. 
	    var last_item = all_inputs.length - 1;
	    var last = all_inputs[last_item].id;
	    var count = Number(last.split("_")[1]) + 1;
	
	    //Create new element
	    if(document.createElement) 
	    { 
		    //W3C method.
		    var tr = document.createElement("tr");
		    var td = document.createElement("td");
		    var li = document.createElement("li");
		    var input = document.createElement("input");
		    input.id = field+count;
		    input.name = field+count;
		    input.type = "text"; 
		    li.appendChild(input);
		    td.appendChild(li);
		    tr.appendChild(td);
		    field_area.appendChild(tr);
	    } 
	    else 
	    { 
		    //Older Method
		    field_area.innerHTML += "<tr><td><li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li></td></tr>";
	    }
    }


    </script> 
    </head>

    <body>


    <div style="float: left; padding: 10px; width:20%;">
    <fieldset>
    <legend>
    <h3>Booking Information</h3>
    </legend>
    <form name="newbookform1" method="POST"> 
    <strong>What:</strong><br/> 

    <table align="left" border="0" cellspacing="0" cellpadding="3">
    <ul id="what_area"> 
    <tr><td><li><input type="text" name="item_1" id="item_1" /> </li> </tr></td>
    <tr><td><li><input type="text" name="item_2" id="item_2" /> </li> </tr></td>
    </ul> 
    <tr><td><input type="button" value="Add What Field" onclick="addField('what_area','item_');" /> </tr></td>
    </table>
    </form> 
    </fieldset>

    </body>
    </html>

Why won't it work?
Dynamic Form Problem
===

So ive been trying to get this dynamic form working but ive run into a problem with making the table.

 
    <html>

    <head>
    <script language="Javascript" type="text/javascript"> 

    //Add more fields dynamically.
    function addField(area,field) 
    {
        //Prevent older browsers from getting any further.
	    if(!document.getElementById) return; 
        //Select area.
	    var field_area = document.getElementById(area); 
        //Get all the input fields in the given area.
	    var all_inputs = field_area.getElementsByTagName("input"); 

	    //Find the count of the last element of the list.
	    //It will be in the format '<field><number>'. 
	    var last_item = all_inputs.length - 1;
	    var last = all_inputs[last_item].id;
	    var count = Number(last.split("_")[1]) + 1;
	
	    //Create new element
	    if(document.createElement) 
	    { 
		    //W3C method.
		    var tr = document.createElement("tr");
		    var td = document.createElement("td");
		    var li = document.createElement("li");
		    var input = document.createElement("input");
		    input.id = field+count;
		    input.name = field+count;
		    input.type = "text"; 
		    li.appendChild(input);
		    td.appendChild(li);
		    tr.appendChild(td);
		    field_area.appendChild(tr);
	    } 
	    else 
	    { 
		    //Older Method
		    field_area.innerHTML += "<tr><td><li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li></td></tr>";
	    }
    }


    </script> 
    </head>

    <body>


    <div style="float: left; padding: 10px; width:20%;">
    <fieldset>
    <legend>
    <h3>Booking Information</h3>
    </legend>
    <form name="newbookform1" method="POST"> 
    <strong>What:</strong><br/> 

    <table align="left" border="0" cellspacing="0" cellpadding="3">
    <ul id="what_area"> 
    <tr><td><li><input type="text" name="item_1" id="item_1" /> </li> </tr></td>
    <tr><td><li><input type="text" name="item_2" id="item_2" /> </li> </tr></td>
    </ul> 
    <tr><td><input type="button" value="Add What Field" onclick="addField('what_area','item_');" /> </tr></td>
    </table>
    </form> 
    </fieldset>

    </body>
    </html>

Why won't it work?