ASP + Jquery focus next textbox from Gridview

Question

I have a gridview with a table. Inside this table we have a few labels and textboxes.

I am currently trying to switch from textbox to the next one when the user presses enter. For this, I am using Jquery.

 $(function () {
            var inputs = $(".mGrid").find('input:text');
            inputs.each(function (index, element) {
                $(element).on('keyup', function (e) {
                    e.preventDefault();
                    if (e.which === 13) {
                    //    alert("enter pressed"); 
                        if (index < inputs.length - 1) {
                            var currentInput = inputs[index];
                            //currentInput.blur();
                            $(':text').blur();
                            var nextInput = inputs[index + 1];
                            alert($(nextInput));
                            $(nextInput).focus();
                        } else {
                            $(inputs[0]).focus();
                        }
                    }
                });
            });
        });

What happens now, is that it doesn't focus the textbox with text inside. also, when textboxes are empty, you need to spam click twice on enter before it does actually swap from textbox.

ASP.net WebForms markup:

<asp:Panel runat="server" ID="pnlProdBOM" align="left" visible="false"
           onload="pnlProdBOM_Load">
    <div id="pnlProdBOMMain">
        <div id="pnlProdBOMGrid" style="margin-top:30px;border: 2px solid rgb(200,200,200);border-radius:10px;padding:10px;background-color:rgb(245,245,245);">
            <div id="div2" style="float:left;">
                <asp:GridView ID="vwProdBOM" runat="server" CaptionAlign="Top" CssClass="mGrid"
                              onrowcreated="vwProdBOM_RowCreated"
                              onrowdatabound="vwProdBOM_RowDataBound" AutoGenerateColumns="False"
                              AllowPaging="True" onpageindexchanging="vwProdBOM_PageIndexChanging">
                    <Columns>
                        <asp:TemplateField HeaderText="Lotnummers">
                            <ItemTemplate><asp:CheckBox ID="Lotnummers" runat="server" Enabled=False Checked='<%# Eval("Lotnummers") %>'></asp:CheckBox></ItemTemplate>
                        </asp:TemplateField>
                      <!-- more thingies. remove for SO-->
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="ScanLotNr">
                            <ItemTemplate>
                                <asp:TextBox ID="txtScanLotNr" runat="server" BackColor="#D8D8D8" BorderStyle="None"></asp:TextBox>
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Right" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Gewicht">
                            <ItemTemplate>
                                <asp:TextBox ID="txtScanAantal" runat="server" BackColor="#D8D8D8" BorderStyle="None" AutoPostBack="False"></asp:TextBox>
                                <asp:RangeValidator ID="ValScanAantal" runat="server" ControlToValidate="txtScanAantal" ErrorMessage="*" MaximumValue="100000" MinimumValue="-100000" Type="Double"></asp:RangeValidator>
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Right" />
                        </asp:TemplateField>
                    </Columns>
                    <PagerSettings Mode="NextPreviousFirstLast" FirstPageImageUrl="~/Nav1.png"
                                   LastPageImageUrl="~/Nav4.png" NextPageImageUrl="~/Nav3.png"
                                   PreviousPageImageUrl="~/Nav2.png" />
                    <SelectedRowStyle BackColor="Red" />
                </asp:GridView>
            </div>
            <div id="div1" style="float:left;margin-left:20px;margin-top:30px;">
                <div id="div4">
                    <asp:Panel ID="pnlLotNr_Fill" runat="server" Width="100px"></asp:Panel>

I made a JSFiddle with the same Jquery and it does work there. I guess there must be something with the Textboxes in ASP?

https://jsfiddle.net/55j6L92k/2/

EDIT: It does work with <input type="text" id="txtScanLotNr" style="background-color:#D8D8D8; border-style: none; " />

but not with

  <asp:TextBox ID="txtScanLotNr" runat="server" BackColor="#D8D8D8" BorderStyle="None"></asp:TextBox> 

Unfortunately I need to use

Answer 1

This should work. Basically you have to find the next <td> first and then the TextBox within it.

<script type="text/javascript">
    $('.mGrid input[type=text]').keypress(function (e) {
        if (e.keyCode == 13) {
            //eerst de td vinden ipv $(this).next anders werkt het niet
            $(this).closest('td').next('td').find('input[type=text]').focus();
        } else {
            return;
        }
    });
</script>

Tested with this GridView

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="mGrid">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>