How to add form elements after insertRow?

<script type="text/javascript">
function addRowToTable()
{
  var tbl = document.getElementById('main');
  var lastRow = tbl.rows.length;
  var i = lastRow;
  var row = tbl.insertRow(lastRow);
  row.className="blck11";
 
  // cell 0  css
  var cell0  = row.insertCell(0);
  cell0.style.width = "2px";
  cell0.style.backgroundColor = "#7C7C7C";
  cell0.style.topMargin = "2px";
 
  // cell 1 line no
  var cell1 = row.insertCell(1);
  cell1.style.textAlign = "center";
  cell1.style.bgcolor = "7C7C7C";
  cell1.width = 40;
  cell1.appendChild( document.createTextNode(i -1) );
 
  // cell 2 bu
  var cell2 = row.insertCell(2);
  var el = document.createElement('input');
  el.type = "text";
  el.id = 'bu' + (i-1);
  el.size = 5;
  el.value = "";
  cell2.width= "40";
  cell2.appendChild(el);
 
  // cell 3 dept
  var cell3 = row.insertCell(3);
  var el = document.createElement('input');
  el.type = "text";
  el.id = 'dept' + (i-1);
  el.size = 5;
  el.value =  "<= $dept" +(i-1)+ " ?>";
  cell3.width= "40";
  cell3.appendChild(el);
 
  // cell 4 account
  var cell4 = row.insertCell(4);
  var el = document.createElement('input');
  el.type = "text";
  el.id = 'acct' + (i-1);
  el.size = 9;
  el.value =  "<= $acct" +(i-1)+ " ?>";
  cell4.width= "90";
  cell4.appendChild(el);
 
  // cell 5 project
  var cell5 = row.insertCell(5);
  var el = document.createElement('input');
  el.type = "text";
  el.id = 'proj' + (i-1);
  el.size = 5;
  el.value =  "<= $proj" +(i-1)+ " ?>";
  cell5.width= "60";
  cell5.appendChild(el);
 
  // cell 6 task
  var cell6 = row.insertCell(6);
  var el = document.createElement('input');
  el.type = "text";
  el.id = 'task' + (i-1);
  el.size = 5;
  el.value =  "<= $task" +(i-1)+ " ?>";
  cell6.width= "40";
  cell6.appendChild(el);
 
  // cell 7 amount
  var cell7 = row.insertCell(7);
  var el = document.createElement('input');
  el.type = "text";
  el.id = 'amt' + (i-1);
  el.size = 14;
  el.value =  "<= $amt" +(i-1)+ " ?>";
  cell7.width= "90";
  cell7.appendChild(el);
 
  // cell 8 empty
  var cell8 = row.insertCell(8);
  cell8.width = 261;
 
  // cell 9 css
  var cell9 = row.insertCell(9);
  cell9.style.width = "2px";
  cell9.style.backgroundColor = "#7C7C7C";
  cell9.style.topMargin = "2px"
}
 
function removeRowFromTable()
{
  var tbl = document.getElementById('main');
  var lastRow = tbl.rows.length;
  if (lastRow > 3) {
    tbl.deleteRow(lastRow - 1);
  }
}
</script>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102: