JSFiddle - React, Tailwind, and code Playground

HTML

<!-- MEDIO -->
<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>

CSS

#jsfiddle-container {
    margin: 30px;
    transform: rotate(-90deg) !important;
}

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);
});