title: How do I make "Enter" keypress in an <input> Element shift focus to the next <input> element on the page. (JavaScript)
body: <p>How do I make make  an <kbd>Enter</kbd> keypress in an <code>&lt;input&gt;</code> element shift focus to the next <code>&lt;input&gt;</code> element on the page?</p>
  
  <p>I have a for loop that creates <code>&lt;li&gt;</code> elements with <code>&lt;input&gt;</code> elements inside. I need to make so that when the user hits enter on their keyboard, the website will focus on the next input field so that the user can enter the next player name without having to toggle between using their mouse and their keyboard.</p>
  
  <p>I thought using the <code>nextSibling</code> property was the solution but it wont work because the <code>&lt;input&gt;</code> elements technically dont have any siblings because each of them is inside/are children of diferent <code>&lt;li&gt;</code> elements.</p>
  
  <p>Here is my JavaScript: </p>
  
  <pre><code>for ( var i = 1 ; i &lt;= numberOfPlayers ; i++ ){
    var inputElement = document.createElement('input');
    var liElement = document.createElement('li');
    inputElement.setAttribute( 'type' , 'text' );
    inputElement.setAttribute ( 'id' , 'name-input-' + i );
    inputElement.setAttribute ( 'class' , 'name-input');
    inputElement.setAttribute ( 'placeholder' , 'Enter a name for player ' + i );
    liElement.appendChild(inputElement);
    nameInputArray[i] = inputElement;
    document.getElementById('name-list').appendChild(liElement);
    inputElement.addEventListener( 'keypress' , function(event){
      if ( event.which === 13 ) {
        alert(this);
        document.getElementById( 'name-input-' + (i+1)).focus();
      }
    } );
  }
  </code></pre>
  
  <p>I tried using the "i" in the for loop and string concatenation to select the ID of the next element but the "i" variable isn't working either because by the time that code runs that "i" is equal to the highest number that it can be after the whole for loop has ran. </p>