Trying to make a nested collapsible table? Help! New to this!

[rvialoux]

Hey I'm sort of stuck. It almost works, but there are so many different ways to do what I'm trying to do it's confusing. I look at 10 examples and they're all different.

/* ------------------- ADD ROW ------------------- */

function addRow(tableID) { 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
		// checkbox
            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
			element1.name = "chk" + rowCount;
            cell1.appendChild(element1);
		// row number
            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount;
		// quantity
            var cell3 = row.insertCell(2);
			cell3.className = "span4";
            var element2 = document.createElement("input");
			element2.type = "text";
			element2.name = "qty" + rowCount;
			element2.className = "span4";
			cell3.appendChild(element2);
		// SKU
			var cell4 = row.insertCell(3);
			var skudiv = document.createElement("div");
			skudiv.className = "input-prepend input-append";
            var element3 = document.createElement("input");
            element3.type = "text";
			element3.name = "sku" + rowCount;
			var skuspanelement = document.createElement("span");
			skuspanelement.className = "add-on";
			skuspanelement.innerHTML = "SKU";
            skudiv.appendChild(skuspanelement);
			skudiv.appendChild(element3);
			cell4.appendChild(skudiv);
		// cost
			var cell5 = row.insertCell(4);
			var costdiv = document.createElement("div");
			costdiv.className = "input-prepend input-append";
            var element4 = document.createElement("input");
            element4.type = "text";
			element4.name = "cost" + rowCount;
			element4.className = "span5";
			var spanelement = document.createElement("span");
			spanelement.className = "add-on";
			spanelement.innerHTML = "$";
            costdiv.appendChild(spanelement);
			costdiv.appendChild(element4);
			cell5.appendChild(costdiv);
		// add items
            var cell6 = row.insertCell(5);
            var element5 = document.createElement("button");
			element5.name = "additembutton" + rowCount;
			element5.className = "btn btn-mini";
			element5.onclick = function() { addmultirow('dataTable') };
			element5.innerHTML = "Add Items";
			cell6.appendChild(element5);
		}
		
/* ------------------- DELETE ROW ------------------- */
 
        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); }
        }


		
/* ------------------- ADD ROW SN ------------------- */
		function addRowSN(tableID) { 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
		// checkbox
            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
			element1.name = "chk" + rowCount;
            cell1.appendChild(element1);
		// row number
            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount;
		// quantity
            var cell3 = row.insertCell(2);
			cell3.className = "span4";
            var element2 = document.createElement("input");
			element2.type = "text";
			element2.name = "qty" + rowCount;
			element2.className = "span4";
			cell3.appendChild(element2);
		// SN
			var cell4 = row.insertCell(3);
			var sndiv = document.createElement("div");
			sndiv.className = "input-prepend input-append";
            var element3 = document.createElement("input");
            element3.type = "text";
			element3.name = "sn" + rowCount;
			element3.className = "span5";
			var snspanelement = document.createElement("span");
			snspanelement.className = "add-on";
			snspanelement.innerHTML = "SN";
            sndiv.appendChild(snspanelement);
			sndiv.appendChild(element3);
			cell4.appendChild(sndiv);
		// UniqueID
			var cell5 = row.insertCell(4);
			var costdiv = document.createElement("div");
			costdiv.className = "input-prepend input-append";
            var element4 = document.createElement("input");
            element4.type = "text";
			element4.name = "uid" + rowCount;
			element4.className = "span5";
			var spanelement = document.createElement("span");
			spanelement.className = "add-on";
			spanelement.innerHTML = "ID";
            costdiv.appendChild(spanelement);
			costdiv.appendChild(element4);
			cell5.appendChild(costdiv);
		// delete items
            var cell6 = row.insertCell(5);
            var element5 = document.createElement("button");
			element5.name = "deleteitem" + rowCount;
			element5.className = "btn btn-mini btn-inverse";
			element5.innerHTML = "Delete Item"
			element5.onclick = function() { deleteRowNCB('dataTable') };
			cell6.appendChild(element5);
		}
/* ------------------- DELETE ROW SN ------------------- */
        function deleteRowSN(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); }
        }
/* ------------------- DELETE ROW W/O CHECKBOX ------------------- */
                   // this needs a little TLC //
        function deleteRowNCB(tableID) 
		
		{
			var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
			
			table.deleteRow(2);
                    rowCount--;
                    i--;
		}
		
		
/* ------------------- ADD MULTI ROW ------------------- */
		function addmultirow() {
			var qtyofrows = document.getElementById("qty");
			var theqty = qtyofrows.value;
			for (var i=0; i < theqty; i++)
				{
				addRowSN("dataTable");
				}
			}
/* ------------------- ROW COLLAPSER ------------------- */
		function hiderow() {
			if( document.getElementById("hidethis").style.display=='none' ){
			document.getElementById("hidethis").style.display = '';
			}else{
			document.getElementById("hidethis").style.display = 'none';
			}
			}

Big blob of the HTML:

<div class="row-fluid">
	<div class="span12">
		<div class="span9">
		<div class="well">
			<legend>Invoice Items</legend><input type="button" value="Delete Item Type" onclick="deleteRow('dataTable')" class="btn btn-inverse pull-right"/><input type="button" value="Add Item Type" onclick="addRow('dataTable')" class="btn btn-info pull-right"/>
 			<br /><br />
			<table id="dataTable" width="350px" border="1" class="table table-hover">
			<tr><th></th><th></th><th>QTY</th><th>SKU</th><th>Cost (each)</th><th></th></tr>
			<tr id="hidethis">
			<td><input type="checkbox" name="chk"/></td>
			<td> 1 </td>
			<td> <input type="text" id="qty" class="span4"/> </td> <td> <div class="ui-widget input-prepend input-append"><span class="add-on">SKU</span><input type="text" id="skubox"/></div> </td> <td> <div class="input-prepend input-append"><span class="add-on">$</span><input type="text" class="span5"/></div> </td> <td> <button class="btn btn-mini" type="button" onclick="addmultirow('dataTable')">Add Items</button> </td>
			</tr>
			</table>
			</div><!--/well-->
		</div><!--/span-->
	</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
	<div class="span12">
		<button onClick="hiderow();">Hide Row</button>
	</div><!--/span-->
</div><!--/row-->

Right now if you input text into the first qty box and hit 'add items' it will create that many rows to put serial numbers onto. That's great, but I want to make those rows attach together somehow, so they are collapsible. The only way I can think of would be to make the tables nest together. So if we were to apply some jQuery to re-organise the table, they would move as a set. Figuring how how to change the function to create a table containing rows right now instead of just adding the rows, it's confusing.

Help greatly appreciated.