My InnerHTML and drop down script does not work with Firefox and Opera

Hi all,

The following code works perfectly with IE but it doesn't work with Firefox and Opera. Do you have any idea about the possible reason ?

Regards



JavaScript Function part:

<script language="JavaScript" type="text/javascript">
function drawSelects(n){
var fields = document.forms["Cal"].elements;
if(n <= 3){
for(var i = 1; i <= 10; i++){
var newOpt = document.createElement("option");
newOpt.text = i;
newOpt.value = i;
fields["sel" + n].options.add(newOpt);
fields["sel" + n].onchange = function(){
drawInputs(this.options[this.selectedIndex].value, this.options[0].text);
}
}
n++;
}
else{return;}
setTimeout("drawSelects(" + n + ")",50);
}

function drawInputs(k, user){
document.getElementById(user).innerHTML = "";
for(var i = 0; i < k; i++){
var newInp = document.createElement("span");
newInp.innerHTML="<input type=text class=style2 name="+ user + (i+1) + " title='"+ user + (i+1) + "' / >";
document.getElementById(user).appendChild(newInp);
document.getElementById(user).innerHTML += "&nbsp;&nbsp;&nbsp;<br />";
}
}

function clearForm(){
document.getElementById("newFields").innerHTML = "<div id=\"adults\"><\/div><div id=\"children\"><\/div><div id=\"infants\"><\/div>";
}
</script>


HTML Part:

<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="44"><div align="left"><span class="style2">Other Adults:</span>
<select id="sel1" name="sel1" class="style2">
<option value="adults">Adults</option>
</select>
</div></td>
<td height="44"><div align="left"><span class="style2">Children(3-12): </span>
<select id="sel2" name="sel2" class="style2">
<option value="children">Children</option>
</select>
</div></td>
<td height="44"><div align="left"><span class="style2">Infants(0-2): </span>
<select id="sel3" name="sel3" class="style2">
<option value="infants">Infants</option>
</select>
</div></td>
</tr>
<tr>
<td colspan="3" valign="top">
<tr>
<td valign="top" width="168"><div align="center" id="adults" runat="server" class="style2"></div> </td>
<td valign="top" width="168"><div align="center" id="children" runat="server" class="style2"></div></td>
<td valign="top" width="168"><div align="right" id="infants" runat="server" class="style2"></div></td>
</tr>
</table>

<div id=\"adults\"><\/div><div id=\"children\"><\/div><div id=\"infants\"><\/div> Why those \s ?
PS: innerHTML() is not a standard DOM method to create something; use createElement() instead.

Thanks for the reply. I didn't write the code. I am not good at javascript. They helped me with writing this script on the Javascript forums. I don't have any idea how I can edit as you said.
Could you send me an example code?

Thanks
telmessos