JSFiddle - React, Tailwind, and code Playground

by Legendary

HTML

<div class="activation-code-list">
    <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c1" ng-focus="code.c1===''">
    <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c2">
    <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c3" >
    <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c4" >
    <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c5" >
    <input type="text" class="activation-input-code" maxlength="1" ng-model="code.c6" >
</div>

JavaScript

var elems = document.querySelectorAll('.activation-input-code');

for(var i = 0; i < elems.length; i = i + 1) {
	elems[i].addEventListener('keypress', handler)
}

function handler(e){
    console.log('e', e);
    
    e.target.nextElementSibling.focus().select();
}