JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parentdiv">
    <select class="ranking">
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>My first item
    <br />
    <select class="ranking">
        <option value="1">1</option>
        <option value="2" selected>2</option>
        <option value="3">3</option>
    </select>My second item
    <br />
    <select class="ranking">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" selected>3</option>
    </select>My third item</div>

JavaScript

var previous;
$(".ranking").on("focus", function() {
    previous = $(this).val();
}).change(function() {
    var value = $(this).val();
    var parent = $(this).closest(".parentdiv");

    $(".ranking option[value='" + value + "']", parent).parent().not(this).prop('selectedIndex', parseInt(previous) - 1);
});