JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="selectItem" value="Select Item in List" />
<select id="testUpdate" name="testUpdateName" multiple="multiple" size="5">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

JavaScript

testUpdate = {
    currentSelection: undefined,
    getCurrentSelectionValue: function () {
        console.log(this.currentSelection);
        if (this.currentSelection === undefined || this.currentSelection === 5) {
            this.currentSelection = 1;
        } else {
            this.currentSelection++;
        }
        return this.currentSelection;
    },
    clearAllSelections: function () {
        $("#testUpdate option:selected").removeAttr('selected');
    },
    runTest: function () {
        this.clearAllSelections();
        
        $("#testUpdate option[value='" + this.getCurrentSelectionValue() + "']").prop('selected', 'selected');
    },
    setupEvents: function () {
        $("#selectItem").click(function () {
            testUpdate.runTest();
        });
    },
    init: function () {
        this.setupEvents();
    }
}

$().ready(function(){testUpdate.init();});