Next input element is not selected when span is detected

Question

I have a set of input elements within 2 span block. I need to automatically select next input element by using onKeup(). This works fine until span tag is found. After that it is not detecting.

In the following code next input element is detected until 3rd input box after that it is not detected.

Can any one help with this?

http://jsfiddle.net/et3escuh/8/

<span>
<input id="opnamenummer6" class="form-control" type="text" name="opnamenummer6" value="" maxlength="1">
<input id="opnamenummer7" class="form-control" type="text" name="opnamenummer7" value="" maxlength="1">
<input id="opnamenummer8" class="form-control" type="text" name="opnamenummer8" value="" maxlength="1">
</span>


<script type="text/javascript">
$('input[class*="form-control"]').keyup(function(event) {
    var $this = $(this);
    var currentLength = $this.val().length;
    var maximumLength = $this.attr('maxlength');
    // if we've filled up this input, go to the next if only numerics are entered.
    if ( (currentLength == maximumLength) && ((event.which >= 48 && event.which <= 57) || (event.which >= 96 && event.which<= 105))) {
        $this.next().select();
    }
    //go to previous input if Backspace or Delete buton is pressed
    if(event.which == 8 || event.which == 46) {
        $(this).val('');
        $(this).prev('input').select();
    }
});

</script>

Answer 1

Don't use next() , use eq() and add or subtract to the index

$('input[class*="form-control"]').keyup(function(event) {
    var $this = $(this);
    var currentLength = $this.val().length;
    var maximumLength = $this.attr('maxlength');

    if ( (currentLength == maximumLength) && (!isNaN(this.value))) {
        $('input').eq($(this).index('input') + 1).select();
    }

    if(event.which == 8 || event.which == 46) {
        $(this).val('');
        $('input').eq($(this).index('input') - 1).select();
    }
});

FIDDLE