I trying to auto increment the serial number when row increases and automatically readjust the numbering order when a row gets deleted in javascript. For that I am using the following clone method for doing my task. Rest of the thing is working correct except its not increasing the srno because its creating the clone of it. Following is my code for this:

function addCloneRow(obj) {
        if(obj) {       
            var tBody = obj.parentNode.parentNode.parentNode;
            var trTable = tBody.getElementsByTagName("tr")[1];
            var trClone = trTable.cloneNode(true);
            if(trClone) {       
                var txt  = trClone.getElementsByTagName("input");
                var srno  = trClone.getElementsByTagName("span");
                var dd   = trClone.getElementsByTagName("select");

                text = tBody.getElementsByTagName("tr").length;   
                alert(text) //here i am getting the srno in increasing order 
                //I tried something like following but not working                                        
                //var ele = srno.replace(document.createElement("h1"), srno);
                //alert(ele);

                for(var i=0; i<dd.length; i++) {
                    dd[i].options[0].selected=true;
                    var nm = dd[i].name;
                    var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("["));
                    dd[i].name = nNm+"[]";
                }
                for(var j=0; j<txt.length; j++) {
                    var nm = txt[j].name;
                    var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("["));
                    txt[j].name = nNm+"[]";
                    if(txt[j].type == "hidden"){ 
                        txt[j].value = "0"; 
                    }else if(txt[j].type == "text") {               
                        txt[j].value = "";              
                    }else if(txt[j].type == "checkbox") {               
                        txt[j].checked = false;
                    }
                }

                for(var j=0; j<txt.length; j++) {
                    var nm = txt[j].name;
                    var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("["));
                    txt[j].name = nNm+"[]";
                    if(txt[j].type == "hidden"){ 
                        txt[j].value = "0"; 
                    }else if(txt[j].type == "text") {               
                        txt[j].value = "";              
                    }else if(txt[j].type == "checkbox") {               
                        txt[j].checked = false;
                    }
                }
                tBody.insertBefore(trClone,tBody.childNodes[1]);                
            }
        }
    }

Following is my html :

<table id="step_details" style="display:none;">
            <tr>
                <th width="5">#</th>
                <th width="45%">Step details</th>
                <th>Expected Results</th>
                <th width="25">Execution</th>
                <th><img src="gui/themes/default/images/ico_add.gif" onclick="addCloneRow(this);"/></th>
            </tr>

            <tr>
                <td><span>1</span></td>
                <td><textArea name="step_details[]"></textArea></td>
                <td><textArea name="expected_results[]"></textArea></td>
                <td><select onchange="content_modified = true"  name="exec_type[]">
                        <option selected="selected" value="1" label="Manual">Manual</option>
                        <option value="2" label="Automated">Automated</option>
                    </select>
                </td>
                <td><img src="gui/themes/default/images/ico_del.gif" onclick="removeCloneRow(this);"/></td>
            </tr>    
        </table>

I want to change the srno. of span element dynamically after increment and decrement on it.

Need help thanks