Enter key acts like tab key doesn't work on tables

Question

I have an enter key that acts as a tab. It works on my other textbox, but after i reached the table data, it doesn't work anymore. My target is how can I go to the next textbox after I press the "enter" key on my table data?

//Enter key that acts as a tab key.
    $('input').keypress(function(e){
        if(e.which==13){ 
            $("[tabindex='"+(parseInt($(this).attr("tabindex"))+1)+"']").focus();
            e.preventDefault();
        }
    });   

//This function creates a tabindex for every textbox.
$(function() {
    var tabindex = 1;
    $('input,select').each(function() {
        if (this.type != "hidden") {
            var $input = $(this);
            $input.attr("tabindex", tabindex);
            tabindex++;
        }
    });
});

   //This function appends textbox. It depends on my dropdown value on my previous page. If user selects "2", on the next page, it will create 2 set of rows with textbox
$(document).ready(function(){

    samples();
  function samples(){
  
 
       $('.appendtablee').html('');
       
     
    for (var i = 0; i<parseInt($('#asdasdas').val()); i++) {
        var row = '<tr>\
            <td>\
                <label> </label>\
            </td>\
            <td>\
                <input type="text" name="l[]" class="form" id="legBand1" />        \
                 <span class="email_result"></span> \
            </td>\
            <td>\
                <input type="text" data-id="wp"  name="W[]" min="1700" max="2200" />        \
            </td>\
            <td>\
                <input type="text" name="Wi[]"  />        \
            </td>\
        </tr>';
        row = $(row);
        $('.appendtablee').append(row);
    }
  
  }

})  

  

//When i press F8 key, it adds row.
    $(window).keydown(function(){
        if (event.keyCode == 119) {
            var row = "<tr><td></td><td><input type='text' tabindex='0' class='form myInput' name='legBand[]' id='legBand1' /> <span class='email_result'></span></td><td><input type='text' class='myInput' data-id='weight'  name='Weight[]' min='1700' max='2200' /></td><td><input type='text' class='myInput' name='Wingband[]' /></td><td><button type='button' style='float:left;' class='removerow btn btn-danger'>X REMOVE ENTRY</button></td></tr>";
            $("#wew").append(row);
            }
        });
    
    $("#wew").on("click", ".removerow", function() {
       $(this).closest("tr").remove(); 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" class="classtable" id="applicanttable">
     
     
     <tr>
                <th>#</th>
                <th>B#</th>
                <th>W#</th>
                <th>W #</th>
                <th>Action</th>
             </tr>
     
            <tbody class="appendtablee" id="wew">
            
                   
          </tbody>

Answer 1

UPDATED SOLUTION AFTER GETTING THE OP REQUIREMENT:

The Logic that I have figured out to traverse the input elements as required is as follows.

Just focus on your first input and then keep clicking Enter Key it will focus() on the next Element.

$(document).ready(function(){

    samples();
  function samples(){
  
 
       $('.appendtablee').html('');
       
     
    for (var i = 0; i<5; i++) { // I have used a hard coded value 5 for now (selector us missing)
        var row = '<tr>\
            <td>\
                <label> </label>\
            </td>\
            <td>\
                <input type="text" name="l[]" class="form myInput" id="legBand1" tabindex="0"/>        \
                 <span class="email_result"></span> \
            </td>\
            <td>\
                <input  class="myInput" type="text" data-id="wp"  name="W[]" min="1700" max="2200" tabindex="0"/>        \
            </td>\
            <td>\
            </td>\
        </tr>';
        row = $(row);
        $('.appendtablee').append(row);
    }
  
  
    const textFields = $('.myInput');
    for(let i=0;i<textFields.length;i++) {
        $(textFields[i]).on('keypress',function(e){
            if(e.which==13){ 
              $(textFields[i+1]).focus();
            }
        });   
     
    }
  }

})  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" class="classtable" id="applicanttable">
  <h1> Testing Testing </h1>
     
     <tr>
                <th>#</th>
                <th>B#</th>
                <th>W#</th>
                <th>W #</th>
                <th>Action</th>
             </tr>
     
            <tbody class="appendtablee" id="wew">
            
                   
          </tbody>

Please Note: I have not increased the tab-index value on each Keypress of Enter, I have avoided the mentioned logic, I don't think it was required in this case.

I have given tabindex=0 to all the inputs and also added a class myInput so that I can make use of that selector.

You can make use of this logic (If required make some changes if needed, but the functionality is working for inputs).

Codepen link if required: https://codepen.io/emmeiWhite/pen/QWMPRVy?editors=1111