Проблема с фокусом элементов - следующий элемент переходит за входное значение

Question

У меня проблема с запросом, который разрабатывает ввод кода проверки электронной почты. Прежде всего, это работает, как и ожидалось, но у меня возникли 2 проблемы:

1. Если я нажму, поле, уже заполненное, чтобы изменить переходы курсора в конце следующего поля, вместопередний. Поэтому, если я введу 1 1 1 1 1 1, щелкните в первом поле и введите «2», он прыгнет в конце 2-го поля и снова нажмет «2», чтобы заполнить 3-е поле. Итак, я получаю 2 1 2 2 2 2. Есть ли способ решить это?

2. По какой-либо причине моя функция $('.lastdigit').on('change', function(){ не будет запущена после заполнения 6-го поля,На самом деле было бы лучше запустить его, когда все 6 полей заполнены. Как я могу это сделать?

Спасибо за проверку !!

Пример Codepen

HTML:

      <form class="form-verify" id="form-verify" method="post" action="https://<?PHP echo $_SERVER['HTTP_HOST']; ?>/include/process-verification.php"> 
      <input type="hidden" name="crsf" value="<?=$_SESSION['crsf']?>"/>
      <input type="hidden" name="crsf-expire" value="<?=$_SESSION['crsf-expire']?>"/>       
            <div class="container-verify">
                <div class="inputs" id="inputs">
                    <input name="number1" maxlength="2" placeholder="•" value=""/>
                    <input name="number2" maxlength="2" placeholder="•" value=""/>
                    <input name="number3" maxlength="2" placeholder="•" value=""/>
                    <input name="number4" maxlength="2" placeholder="•" value=""/>
                    <input name="number5" maxlength="2" placeholder="•" value=""/>
                    <input id="lastdigit" name="number6" maxlength="1" placeholder="•" value=""/>
                </div>
            </div>          
        <div class="space50"></div>
        <button id="btnSubmit1" type="submit" class="btn btn-full-rounded">Verify</button>
        <div class="space10"></div>           
        <span class="output_message"></span>    
      </form>

JQUERY:

function processInput(holder){
    var elements = holder.children(), 
            str = ""; 

    elements.each(function(e){ 
        var val = $(this).val().replace(/\D/,""), 
                focused = $(this).is(":focus"), 
                parseGate = false;

        val.length==1?parseGate=false:parseGate=true; 
        $(this).val(val);

        if(parseGate&&val.length>1){ 
            var exist = elements[e+1]?true:false; 
            exist&&val[1]?( 
                elements[e+1].disabled=false,
                elements[e+1].value=val[1], 
                elements[e].value=val[0],
                elements[e+1].focus()
            ):void 0;
        } else if(parseGate&&focused&&val.length==0){ 
            var exist = elements[e-1]?true:false; 
            if(exist) elements[e-1].focus();
        }

        val==""?str+=" ":str+=val;
    });
}

$('.lastdigit').on('change', function(){
    alert('Submit');  // --------------->>> NOT WORKING
    $('.form-verify').submit() // --------------->>> NOT WORKING
});

$("#inputs").on('input', function(){processInput($(this))}); 

$("#inputs").on('click', function(e) { 
        var els = $(this).children(),
        str = "";
    els.each(function(e){
        var focus = $(this).is(":focus");
        var $this = $(this);
        while($this.prev().val()==""){
            $this.prev().focus();
            $this = $this.prev();
        }
    });
});

$(".form-verify").submit(function(e) {
  alert('Form will submit here with Ajax...');
});