<div id="digitsContainer">
    <form id="codeverifyForm">
        <div id="inputs">
            <input type="text" class="digit" id="verificationCodeDigit1" minlength="1" maxlength="1" required>
            <input type="text" class="digit" id="verificationCodeDigit2" minlength="1" maxlength="1" required>
            <input type="text" class="digit" id="verificationCodeDigit3" minlength="1" maxlength="1" required>
            <input type="text" class="digit" id="verificationCodeDigit4" minlength="1" maxlength="1" required>
            <input type="text" class="digit" id="verificationCodeDigit5" minlength="1" maxlength="1" required>
            <input type="text" class="digit" id="verificationCodeDigit6" minlength="1" maxlength="1" required>
        </div>
        <button type="button" id="verificationButton" onclick="codeverify();">Verify code</button>
    </form>
</div>

body{
    background-color:pink;
width:auto;
  heaight:auto
}


.digit {
    width: 50px;
    height: 50px;
    margin: 5px;
    text-align: center;
    font-size: 20px;
    color: transparent;
    box-shadow: 0px 2px 5px -2px #f50000ce;
    text-shadow: 0 0 0 #040404bb;
    border-color: #dcdcdcfc;
    border-width: 1px;
    border-radius: 5px;
    border-style: solid;
    outline-color: #040404bb;
    transition: 0.3s transform;
}

.digit:focus {
    transform: scale(1.3);
    transition: 0.1s;
}

#verificationButton {
    width: 100px;
    height: 50px;
    margin: 5px;
    text-align: center;
    font-size: 20px;
    background-color: #ffffff;
    color: transparent;
    box-shadow: 0px 2px 5px -2px #f50000ce;
    text-shadow: 0 0 0 #040404bb;
    border-color: #dcdcdcfc;
    border-width: 1px;
    border-radius: 5px;
    border-style: solid;
    outline-color: #ff0000bb;
}

#verificationButton:hover {
    border: solid 2px #000000ce;
    width: 110px;
    height: 60px;
    cursor: pointer;
    /* transform: scale(0.1); */
    transform: scale(1);
    transition: 0.1s;
}

#digitsContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  margin-top:250px;
}

   function codeverify() {
 var digit1 = document.getElementById('verificationCodeDigit1').value;
    if (digit1 == "") {
        alert("OTP is too short");
        return;
    }
    var digit2 = document.getElementById('verificationCodeDigit2').value;
    if (digit2 == "") {
        alert("OTP is too short");
        return;
    }
    var digit3 = document.getElementById('verificationCodeDigit3').value;
    if (digit3 == "") {
        alert("OTP is too short");
        return;
    }
    var digit4 = document.getElementById('verificationCodeDigit4').value;
    if (digit4 == "") {
        alert("OTP is too short");
        return;
    }
    var digit5 = document.getElementById('verificationCodeDigit5').value;
    if (digit5 == "") {
        alert("OTP is too short");
        return;
    }
    var digit6 = document.getElementById('verificationCodeDigit6').value;
    if (digit5 == "") {
        alert("OTP is too short");
        return;
    }
   }
   $(".digit").keyup(function () {
    $(this).next('input').focus();
});