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

JavaScript

$('#btn-medio-plus').click( function() {
    var opt_l = $( "#medio option" );
    var opt_s = $( "#medio option:selected" );
    var i = $( opt_s ).index() + 1;
    $( opt_l[ i % opt_l.length ] ).prop( "selected", true );   
});