title: Issue on tab index from text box to another
body: <pre><code>&lt;td&gt;&lt;input type="text" tabindex="4" name="itemName[]" id="itemName_1" id="productList" class=" form-control autocomplete_txt" required="" &gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" tabindex="5" name="quantity[]" id="quantity_1" class="form-control changesNo" autocomplete="off" onkeypress="return isNumber(event);" ondrop="return false;" onpaste="return false;" required="required"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input tabindex="6" type="text" name="price[]" id="price_1" class="inputs1 form-control changesNo groupOfTexbox" autocomplete="off" onpaste="return false;" required="required" onchange="create_row();"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text"  name="total[]" id="total_1" class="form-control totalLinePrice total_alone" autocomplete="off" onkeypress="return isNumeric(event);" ondrop="return false;" onpaste="return false;" required="required" readonly=""&gt;&lt;/td&gt;
  
  
  
  $(document).on('change', '.amount', function(){
      event.preventDefault();
      if( event.which == 9 ) {
  
          create_row();
      }
  });
  
  function create_row()
  {
  
      var tabindex1 = parseInt($("#tabindex_value").val());
      var i=$('table tr').length;
      var tabindex2 = tabindex1 + 1;
      var tabindex3 = tabindex1+2;
      var tabindex4 = tabindex1+3;
      var tabindex5 = tabindex1+4;
      var tabindex6 = tabindex1+5;
      var tabindex7 = tabindex1+6;
  
      html = '&lt;tr&gt;';
      // html += '&lt;td&gt;&lt;input class="case" type="checkbox"/&gt;&lt;/td&gt;';
  
      html += '&lt;td&gt;&lt;input type="text" class="inputss form-control autocomplete_txt" tabindex="7" name="itemName[]" id="itemName_'+i+'" id="productList"&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;input type="text" class="form-control changesNo" tabindex="'+tabindex2+'" name="quantity[]" id="quantity_'+i+'" autocomplete="off" onkeypress="return isNumber(event);" ondrop="return false;" onpaste="return false;"&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;input type="text" tabindex="'+tabindex3+'" name="price[]" id="price_'+i+'" class="amount form-control changesNo groupOfTexbox" autocomplete="off" onpaste="return false;"&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;input type="text" tabindex="'+tabindex4+'" name="total[]" id="total_'+i+'" class="form-control totalLinePrice total_alone" autocomplete="off" onkeypress="return isNumeric(event);" ondrop="return false;" onpaste="return false;" readonly&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;a class="btn btn-sm btn-danger delete" id="delete'+i+'" style="padding:0px 5px"&gt;&lt;i class="fa fa-times" style="color:#fff;font-size:14px"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;';
  
      html += '&lt;/tr&gt;';
  
      $("#tabindex_value").val(tabindex7);
  
      $('table').append(html);  
      $(".item2").autocomplete({
          source: "https://www.duminex.com/product/search",
          select: function( event, ui ) {        
              var a = i - 1;
              $('#id').val(ui.item.id);       
              $('#price_' + a).val(ui.item.price);
          }
      });
      i++;
  }
  </code></pre>
  
  <p>In above code, On change some amount in textbox on press tab it will point next index 7 that is in newly created row. But dont know what mistake I made in code.After change amount in textbox if I press tab its not pointing to itemname.
  Please anyone help me to get out of this issue. Thanks in advance.</p>