How to move focus to next element on enter on dynamically created select

Issue

html form contains input elements.

Javascript and jquery code are used to create select element at runtime and inserting it after element elemand assigning Bootstrap 5 class to it:

let selectArray = ["Intv Scheduled", "Selected", "Rejected", "On Hold"];
let id = 'Customer';

$('#' + id).remove();

var selectList = document.createElement("select");
selectList.id = selectList.name = id;
selectList.className = "form-select";

elem.after(selectList);
for (var i = 0; i < selectArray.length; i++) {
    var option = document.createElement("option");
    option.value = option.text = selectArray[i];
    selectList.appendChild(option);
}  
selectList.focus();

User selects item using enter key. After pressing enter select element is still focused.

How to move focus to next element in form if enter is pressed?
How to replace $('#' + id).remove() with plain JavaScript so the jQuery dependency can be removed?

Solution

Kind of hard to guess what you are asking for.

There are already multiple suggestions and answers available on SO.

Enter key press behaves like a Tab in Javascript

document.addEventListener('keydown', function (e) {

  if (event.keyCode === 13 && event.target.nodeName == 'SELECT') {
    var form = event.target.closest('form');
    var index = Array.prototype.indexOf.call(form, event.target);
    form.elements[index + 1].focus();
    return false;
  }
});

<form>
<div id = "Customer">Customer</div>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
</form>

Answered By - SScotti