Dynamic Add of Row

[flemingmike]

hello, im trying to create a form with being able to dynamically add another row to the form on the fly.  below is the form code I am using as well as the javascript to add the next row.  I feel like it may be as simple as moving the div line.  any help is appreciated!

<div align="center">
				<table border="1" cellpadding="2" style="border-collapse: collapse" width="90%" bordercolorlight="#000000" bordercolordark="#000000">

					<tr>
						<td align="center" width="11%"><b>Q Labour</b></td>
						<td align="center" width="43%"><b>Description</b></td>
						<td align="center" width="13%"><b>Labour</b></td>
						<td align="center" width="12%"><b>Helper</b></td>
						<td align="center" width="19%"><b>Labour Markup</b></td>
					</tr>
					<tr>
						<td align="center" width="11%">
						<input type="text" name="lqlabour[]" size="4"></td>
						<td align="center" width="43%">
						<textarea rows="2" name="ldescription[]" cols="30"></textarea></td>
						<td align="center" width="13%">
						<input type="text" name="llabour[]" size="7"></td>
						<td align="center" width="12%">
						<input type="text" name="lhelper[]" size="7"></td>
						<td align="center" width="19%">
						<input type="text" name="lmarkup[]" size="7" value="30%"></td>
					</tr>
					<tr>
						<td align="center" width="11%">
						<input type="text" name="lqlabour[]" size="4"></td>
						<td align="center" width="43%">
						<textarea rows="2" name="ldescription[]" cols="30"></textarea></td>
						<td align="center" width="13%">
						<input type="text" name="llabour[]" size="7"></td>
						<td align="center" width="12%">
						<input type="text" name="lhelper[]" size="7"></td>
						<td align="center" width="19%">
						<input type="text" name="lmarkup[]" size="7" value="30%"></td>
					</tr>					
					<tr>
					<div id="dynamicInput">
					</tr>
					<tr>
						<td colspan="5">
						<input type="button" value="Add Line" onClick="addLabour('dynamicInput');" style="float: right"></td>
					</tr>
					<tr>
						<td colspan="5">
						<p align="right"> </td>
					</tr>
					</div>
				</table>
			</div>

var counter = 1;
var limit = 3;
function addLabour(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = " <tr>" + "<td align='center' width='11%'>" + "<input type='text' name='lqlabour[]' size='4'></td>" + "<td align='center' width='43%'>" + "<textarea rows='2' name='ldescription[]' cols='30'></textarea></td>" + "<td align='center' width='13%'>" + "<input type='text' name='llabour[]' size='7'></td>" + "<td align='center' width='12%'>" + "<input type='text' name='lhelper[]' size='7'></td>" + "<td align='center' width='19%'>" + "<input type='text' name='lmarkup[]' size='7' value='30%'></td>" + "</tr> ";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

[Muddy_Funster]

yeah...you posted this in the wrong board, but perhaps this link will help http://www.mustbebuilt.co.uk/2012/07/27/adding-form-fields-dynamically-with-jquery/