Dynamically added Row is Invisible in another javascript function..?

I have table as below, I need to create 5 default rows, ( this is fine with below code)..but when add row its creating row in a table, but the created row is not visibile in another java script function. scripts are pasted at the bottom. please help me.

<table border='0' cellpadding=3 cellspacing=1 align="left" width="80%"
        id="dtlstable"
        style="border-width: 1px; border-color: #000000; border-style: solid;">

        <tr>
            <td align="left">First Name</td>
            <td align="left">Last Name</td>
            <td align="left">Email ID</td>
            <td align="left">Delete</td>
        </tr>
        <logic:present scope="request" name="searchDetail">
            <logic:empty scope="request" name="searchDetail">
                <%
                    for (int i = 1; i <= 5; i++) {
                %>
                <tr>
                    <td align="left"><html:text styleId='<%="fNameId"+i%>'
                        property="comForm.fName" value='${detail.fName}'
                        onkeypress="return check(event)" onkeyup="upperCase(this.id)"
                        styleClass="regTextbox" /></td>
                    <td align="left"><html:text styleId='<%="lNameId"+i%>'
                        property="comForm.lName" value='${detail.lName}'
                        onkeypress="return check(event)" onkeyup="upperCase(this.id)"
                        styleClass="regTextbox" /></td>
                    <td align="left"><html:text styleId='<%="eMailId"+i%>'
                        property="comForm.emailID" value='${detail.emailID}'
                        onkeypress="return check(event)" onchange="checkEmail(this.id)"
                        styleClass="regTextbox" /></td>
                </tr>
                <%
                    }
                %>
            </logic:empty>
        </logic:present>

function addRow(tableID) {

    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    i = rowCount;

    var tBody = table.getElementsByTagName('tbody')[0];
    var newTR = document.createElement('tr');
    var newTD1 = document.createElement('td');
    var newTD2 = document.createElement('td');
    var newTD3 = document.createElement('td');

    newTD1.innerHTML="<INPUT type= 'text' styleId='fName"+i+"' name='comForm.fName' value='' onkeypress='return check(event)' onkeyup='upperCase(this.id)' class='regTextbox' />";


    newTD2.innerHTML="<INPUT type= 'text' styleId='lName"+i+"' name='comForm.lName' value='' onkeypress='return check(event)' onkeyup='upperCase(this.id)' class='regTextbox' />";

    newTD3.innerHTML="<INPUT type= 'text' styleId='eMailId"+i+"' name='comForm.emailID' value='' onkeypress='return check(event)' onkeyup='upperCase(this.id)' class='regTextbox' />";

    newTR.appendChild (newTD1);
    newTR.appendChild (newTD2);
    newTR.appendChild (newTD3);
    tBody.appendChild(newTR);
}

function saveAll(tableID) {

    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    var saveEmails = "";
    alert(rowCount);
     for ( k=1; k<=rowCount-1; k++){
         alert(document.getElementById('fNameId'+k).value);
         if( document.getElementById('fNameId'+k).value!='' && document.getElementById('lNameId'+k).value && document.getElementById('eMailId'+k).value!=''){
             saveEmails += document.getElementById('fNameId'+k).value +"~"+
                        document.getElementById('lNameId'+k).value +"~"+
                        document.getElementById('eMailId'+k).value +"^";
         }
     }

     document.getElementById('methoId').value = "saveEmails" ;
     document.getElementById('saveEmailsId').value = saveEmails ;
    // document.getElementById('communicationFormId').submit();
     document.forms[0].submit();
}