It's almost done but I can't figure out why this code stop working (rotating the selected option) after completing the first cycle.

Here's my code:

HTML

<div id="jsfiddle-container" class="form-group col-sm-12">
    <div class="input-group input-group-lg">
        <select name="medio" id="medio" class="form-control text-center" required>
            <option value="" selected>Forma de Pago</option>
            <option value="tc">Tarjeta de Crédito</option>
            <option value="cash">Efectivo</option>
            <option value="cheq">Cheque</option>
        </select>
        <span class="input-group-btn">
            <button id="btn-medio-plus" class="btn btn-info" type="button" tabindex="-1">Change
            </button>
        </span>
    </div>
</div>

Javascript

$('#btn-medio-plus').click( function() {
     var actual = $('#medio option:selected');
     var actualIndex = actual.index();
     var nextIndex = ( actualIndex + 1 == $('#medio option').length ) ? 0 : actualIndex + 1;
     var next = $('#medio option').eq( nextIndex );

     actual.removeAttr('selected');
     next.attr('selected', true);
});

And here is the jsFiddle link: http://jsfiddle.net/swordf1zh/zue7ghcw/3/

I'm new into Javascript so I would really appreciate an explanation of how to make the code work and why it's not working as expected right now.

Thanks in advance!