JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div data-role="content" id="settingsPanel">
    <div data-role="fieldcontain" id="menSelector">
        <label for="flip-1">Men</label>
        <select name="flip-1" id="flip-1" data-role="slider" data-mini="true">
            <option value="off"></option>
            <option value="on"></option>
        </select>
    </div>
    <div data-role="fieldcontain" id="womenSelector">
        <label for="flip-2 ">Women</label>
        <select name="flip-2" id="flip-2" data-role="slider" data-mini="true">
            <option value="off"></option>
            <option value="on"></option>
        </select>
    </div>
</div>

JavaScript

$(document).on("pagecreate", function () {
    $("#flip-1, #flip-2").on("change", function () {
        if ($(this).val() == "on") {
            $("select").not($(this)).val("off").slider("refresh");
        }
        if ($(this).val() == "off") {
            $("select").not($(this)).val("on").slider("refresh");
        }
    });
});