Javascript - Auto Focus Next Input in iOS without virtual keyboard closing

Question

I'm building a javascript single page app that requires a user to input their date of birth to verify if they are over 18 to view the content.

For the user input, i've decided to markup 4 inputs for each digit as i need to style this with CSS to make it look pretty. On a desktop and virtually every other mobile device, my code is working as expected.

A user inputs for example "1" in the first input field, then "9" in the next etc, and a line of jQuery is 'auto focusing' the next input.

However on iOS, once a user enters a digit in the input field, the virtual keyboard is closing, and the user then needs to tap the next input field (to open the virtual keyboard again) and continue. This is very frustrating and not an ideal user experience. I've had to disable the 'auto focus' feature on iOS as i haven't been able to get this working.

HTML:

<div id="modal">
 <div id="dob-input">
  <div class="number-field">
  <div class="number-value"></div>
  <input type="number" class="number" pattern=[0-9]* />
 </div>
 <div class="number-field">
   <div class="number-value"></div>
   <input type="number" class="number" pattern=[0-9]* />
 </div>
 <div class="number-field">
   <div class="number-value"></div>
   <input type="number" class="number" pattern=[0-9]* />
 </div>
 <div class="number-field">
  <div class="number-value"></div>
  <input type="number" class="number" pattern=[0-9]* />
 </div>
 </div>
</div>

JavaScript

var AgeGate = (function() {
     var numberFields = $("#age-gate input.number");
    var init = function() {
     bindDOBKeypress();
    };
    var bindDOBKeypress = function() {
     numberFields.keyup(function(e) {
      if ($(this).val().length == 1) {
        // Adds the value to number-value div
        $(this).siblings(".number-value").text($(this).val());
        // Auto focuses to next input
        $('input.number:eq(' + ($('input.number').index(this) + 1) + ')').focus();
      }
    });
    // Restrict input to 1 digit
    numberFields.keydown(function(e){
     var inputValue = $(this).val();
      if (inputValue.length >= 1) {           
     $(this).val(inputValue.slice(1));
      }
    });
  }
  return {
    init: init
  }
})();
AgeGate.init();

Full codepen available: http://codepen.io/dan_hernandez/pen/LGrmGe

My question is this: Is it possible to dispatch a click or focus event on keyup or change in iOS, without closing the virtual keyboard?

I've come across this on SO: Programmatically focus on next input field in mobile safari but when i re-purpose it for my needs, it doesn't work. I need the focus to happen once there is a digit in the field rather than on a button click.

I have tried dispatching a click event as per this: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events as well as creating a touch event and dispatching that, but all fails and gives the same result (keyboard closes on focusout/blur)

I've seen this issue solved on other apps/sites, just have no idea how it's been done! It's proven a very frustrating task to achieve

Note: Safari on iPhone iOS doesn't seem to have the issue where the keyboard closes, but Chrome on iPhone as well as Safari and Chrome on iPad all don't work. tested in iOS 8 and 9