JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div data-role="page" id="home" class="type-home">
            <div data-role="content">
                <div class="content-primary">
                    <p>The value from the server is "<span id="valueDisplay"></span>"<br/>
                        The flip toggle switch is displayed like this:</p>
                    <div data-role="fieldcontain">
                        <label for="slider">
                            Flip switch:</label>
                        <select name="slider" id="my-slider" data-role="slider">
                            <option id="firstOption" data-test="" data-status="deactivated" value="off">Activated</option>
                            <option id="secondOption" data-test="" data-status="activated" value="on">Deactivated</option>
                        </select>
                    </div>                
                </div>
            </div>
        </div>
        </form>
     </body>
    </html>

JavaScript

function changeOption() {
            var x = Math.floor(Math.random()*3);
            x=1;
            $("#valueDisplay").text(x);
            $("select[id='my-slider'] option:"+(x===1?"firstOption":"secondOption")).attr('selected', 'selected').slider('refresh');
            
        /*    if (x == 1) {
                $('#firstOption').attr('selected', 'selected').slider('refresh');
            }
            else {
                $('#secondOption').attr('selected', 'selected').slider('refresh');
            }*/
        }


    $('#my-slider').change(function() {
        var myswitch = $(this);
        alert(myswitch.val());
    });


changeOption();