<div class="otpCont flex spaceBetween">
                <!-- <div class="otSc"></div> -->
                <input class="otSc" type="text" maxlength="1">
                <input class="otSc" type="text" maxlength="1">
                <input class="otSc" type="text" maxlength="1">
                <input class="otSc" type="text" maxlength="1">
                <input class="otSc" type="text" maxlength="1">
                <input class="otSc" type="text" maxlength="1">
                <!-- <input class="otSc" type="text" maxlength="1">
                <input class="otSc" type="text" maxlength="1"> -->
            </div>

.flex{
  display: flex;
}
.otSc {
    margin: 0;
    margin-right: 16px;
    border: 1px solid;
    padding: 10px 0px;
    font-size: 38px;
    text-align: center;
    width: 100%;
    outline: none;
}
.otSc:last-child{
  margin-right: 0;
}
.otpCont {
    padding: 40px 40px;
}

    // OTP Input
    document.querySelectorAll(".otSc").forEach(function(otpEl) {
        otpEl.addEventListener("keyup", backSp);
        otpEl.addEventListener("keypress", function() {
            var nexEl = this.nextElementSibling;
            nexEl.focus();
        })
    })

    function backSp(backKey) {
        if (backKey.keyCode == 8) {
            var prev = this.previousElementSibling.focus()
        }
    }
    // OTP Input (End)