Problen in using tab index to navigate between forms in html and jquery

See more:

HTML

PHP

jQuery

forms

Hii am working on a project where the user needs to fill up a form in PHP.

Click here for Screenshot 1[^]

Now while filling up the form I have added a button called "Add Another File & Remove" once this button is clicked a set of forms re-appears when Remove is clicked the newly added form will be removed .

Click here for Screenshot 2[^]

Now my problem is I used tab index to navigate between the text box , when "Add Another File" is clicked a part of form reappears and now the tabindex moves to the beginning position and not to the newly placed text box of the form .

HTML coding of the form ::

<input type="text" id="filename1"  tabindex="1" class="in-txt1" placeholder="* File Name">
            <input type="text" id="length1" class="in-txt1 txt" tabindex="2" placeholder="* File Length">
            <input type="text" id="speaker1" tabindex="3" class="in-txt1" placeholder="* Speaker">

           </div>
           <div class="in-row">
           <input type="text" id="category1" tabindex="4" class="in-txt1" placeholder="* Category">
           <input type="text" id="costmin1" tabindex="5" class="in-txt1 numeric txtt" placeholder="* Cost/Min">
           <input type="text" id="cost1" tabindex="6" class="in-txt1 numeric" onpaste="return false;" ondrag="return false;"  öndrop="return false;" readonly="true" placeholder="* Cost">
           </div>
           </p>
            </div>
             <input type="submit" name="addScnt" tabindex="7" style="width:180px;" id="addScnt" value="Add Another File" class="save-entry" />
            <br /><br />
           <div class="in-row"><br>
           <input type="text" id="email" tabindex="8" placeholder="* Email ID" class="in-txt1">
           <label class="in-txt1">Time Code <input type="checkbox" tabindex="9" id="time" style="float:right; height:20px; width:20px;"></label>
           <label class="in-txt1">Verbatim <input type="checkbox" tabindex="10" id="verb" style="float:right; height:20px; width:20px;"></label>
           </div>
           <div class="in-row">
           <textarea id="comment" class="in-txt1" tabindex="11" placeholder="* Comment"></textarea>
           <label class="in-txt1">Rush <input type="checkbox" tabindex="12" id="rush" style="float:right; height:20px; width:20px;"></label>

           </div>
           <div  id="invoice" tabindex="13" class="save-entry" style="margin: 8px -83px 0 0;width: 50px;">Submit</div><br>
           <div align="center" class="msg" style="color: rgb(85, 85, 85);width: 400px;float: right;height: 44px;line-height: 44px;padding: 0 30px 0 0;"></div>
       </div>

Jscript for the ADD ANOTHER FILE

<pre lang="xml"><script type="text/javascript">
$(function() {
        var scntDiv = $('#txtlength');

        var i = $('#txtlength p').size() ;


        $('#addScnt').live('click', function() {

        $('<p> <label class="in-row"><input type="text" id="filename'+i+'"  tabindex="7" class="in-txt2" placeholder="* File Name"><input type="text" id="length'+i+'" class="in-txt2 txt" tabindex="7" placeholder="* File Length"><input type="text" id="speaker'+i+'" tabindex="7" class="in-txt2" placeholder="* Speaker"></label><label class="in-row"><input type="text" id="category'+i+'" tabindex="7" class="in-txt2" placeholder="* Category"><input type="text" id="costmin'+i+'" tabindex="7" class="in-txt2 numeric txtt" placeholder="* Cost/Min"><input type="text" id="cost'+i+'" tabindex="7" class="in-txt2 numeric" onpaste="return false;" ondrag="return false;" ondrop="return false;" readonly="true" placeholder="* Cost"></label><input type="button" id="remScnt" value="Remove" class="save-entry1" /></label><br><br><br><br><br><br><br></p>').appendTo(scntDiv);


                i++;
                return false;

        });

        $('#remScnt').live('click', function() {
                if( i > 1 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });

});
</script>

Thanks in advance ..