ciao a tutti!

Ho una stringa del tipo:

codice:
var stringa = "1, dato2, dato3, dato4; 11, dato12, dato13, dato14; 21, dato22, dato23, dato24;";
effettuo lo split del ";" e tramite un ciclo while ottengo i valori separati in questo modo:

1, dato2, dato3, dato4
11, dato12, dato13, dato14
21, dato22, dato23, dato24

ora il mio problema è il seguente; devo poter effettuare un secondo ciclo per recuperare i valori separati dalla virgola e inserirli nel div, purtroppo ho provato in diversi modi ma non ci sono riuscito..inserisco quanto fatto fino ad ora..

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>

<script type="text/javascript">

function prova()
{
	var stringa = "1, dato2, dato3, dato4; 11, dato12, dato13, dato14; 21, dato22, dato23, dato24;";
	
	var arr_testo = stringa.split(";");
	
	var i = 0;

	while (i<arr_testo.length)
	{
		
		var rec = arr_testo[i].split(",");
		
		document.getElementById("id_"+rec[0]+"").innerHTML = rec[0];
		document.getElementById("dato1_"+rec[0]+"").innerHTML = rec[1];
		document.getElementById("dato2_"+rec[0]+"").innerHTML = rec[2];
		document.getElementById("dato3_"+rec[0]+"").innerHTML = rec[3];

		i++;
	}

}
</script>

</head>

<body>
<div id="id_1"a</div>
<div id="dato1_1"></div>
<div id="dato2_1"></div>
<div id="dato3_1"></div>


</p>
<div id="id_11"a</div>
<div id="dato1_11"></div>
<div id="dato2_11"></div>
<div id="dato3_11"></div>


</p>
<div id="id_21"a</div>
<div id="dato1_21"></div>
<div id="dato2_21"></div>
<div id="dato3_21"></div>


</p>



</p>



  <input type="button" name="button" id="button" value="Pulsante" onclick="prova()" />
</p>
</body>
</html>
mi aggiorna solo i primi 4 div e non gli altri perchè manca il ciclo..qualcuno mi può aiutare?