I am trying to add functionality to a table that allows users to add and remove table rows, but I am stuck on the JS part of it. The JS I am working with allows users to add/remove table rows that are populated with text input fields, but I want it so where the rows are populated with these elements: 1) multiple select with populated options, 2) file upload box (input type="file"). I have no idea how to modify the JS below to do this (I am new to JS).

Here is the JS I am working with:

Code:
function addRow(tableID) {  
	var table = document.getElementById(tableID);  
	var rowCount = table.rows.length;  
	var row = table.insertRow(rowCount);  

	var cell1 = row.insertCell(0);  
	var element1 = document.createElement("input");  
		element1.type = "checkbox";  
		cell1.appendChild(element1);  

	var cell2 = row.insertCell(1);  
		cell2.innerHTML = rowCount + 1;  

	var cell3 = row.insertCell(2);  
	var element2 = document.createElement("input");  
		element2.type = "text";  
		cell3.appendChild(element2);  
}


function deleteRow(tableID) {  
	try {  
		var table = document.getElementById(tableID);  
		var rowCount = table.rows.length;  
			for(var i=0; i<rowCount; i++) {  
				var row = table.rows[i];  
				var chkbox = row.cells[0].childNodes[0];  
					if(null != chkbox && true == chkbox.checked) {  
						table.deleteRow(i);  
						rowCount--;  
						i--;  
					}  
			}  
	}catch(e) {  
			alert(e);  
			}  
}
Here is the HTML:

Code:
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="dataTable">
<tr>
	<td valign="bottom">&nbsp;</td>
	<td valign="bottom"><label for="mobileManufacturer">Manufacturer</label></td>
	<td valign="bottom"><label for="mobileModel">Model</label></td>
	<td valign="bottom"><label for="descriptorFile">Build Descriptor File (JAD)</label></td>
	<td valign="bottom"><label for="binaryFile">Build Binary (JAR, CAD, ZIP)</label></td>
</tr>
<tr>
	<td valign="top"><input type="checkbox" /></td>
	<td valign="top">
		<select multiple="multiple" size="4" id="mobileManufacturer">
				<option>Manufacturer 1</option>
				<option>Manufacturer 2</option>
				<option>Manufacturer 3</option>
				<option>Manufacturer 4</option>
				<option>Manufacturer 5</option>
				<option>Manufacturer 6</option>
			</select>
	</td>
	<td valign="top">
		<select multiple="multiple" size="4" id="mobileModel">
				<option>Model 1</option>
				<option>Model 2</option>
				<option>Model 3</option>
				<option>Model 4</option>
				<option>Model 5</option>
				<option>Model 6</option>
			</select>
	</td>
	<td valign="top"><input type="file" id="descriptorFile" /></td>
	<td valign="top"><input type="file" id="binaryFile" /></td>
</tr>
</table>

<br />

<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
Any help is appreciated.