Web Forms :: Dynamic Controls Not Getting Generated Locally But Not When I Put The Page On Server.

I have following code and Javascript in my aspx page and my aspx page has a master page:-

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script language = "javascript" type = "text/javascript">
function GenerateNew() {
var tblRow = document.getElementById("ctl00_ContentPlaceHolder1_tblRow");
var tr = document.createElement("tr");
var td = document.createElement("td");
var txt = document.createElement("input");
var theValue = document.getElementById("theValue");
theValue.value = parseInt(theValue.value) + 1;
i = theValue.value;
tr.setAttribute("id", "tr" + i);
td.appendChild(txt);
tr.appendChild(td);
tblRow.appendChild(tr);
}
function RemoveRow() {
var tblRow = document.getElementById("ctl00_ContentPlaceHolder1_tblRow");
var Val = document.getElementById("theValue");
for (var i = 1; i <= Val.value; i++) {
var RowToBeDeleted = document.getElementById('tr' + i);
if (RowToBeDeleted != null) {
tblRow.removeChild(RowToBeDeleted);
}
}
}
</script>
<asp:Table ID="tblRow" runat="server">
<asp:TableRow>
<asp:TableCell>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<input type = "hidden" id = "theValue" value = "0" /> <input id="Button2" type="button" value="Insert Record From JS" onclick = "GenerateNew()" />
<input id="Button3" type="button" value="Remove From JS" onclick = "RemoveRow()" />
</asp:Content>

This JS code generates a dynamic textbox and adds it to the existing table <asp:Table>. It works perfectly when I run it locally, however it doesn't work when I put it on the server.

This issue is only with IE, other browsers like Firefox and Chrome works perfectly fine locally and at server but IE works only locally not at the server. I am using IE 8 (OR 8.0.6001.18702 to be precise) and IIS 5.1.