JSFiddle - React, Tailwind, and code Playground

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div id="US_toggle" class="floatRight">
    <select name="US_flipswitch" id="US_flipswitch" data-role="flipswitch" data-theme="c" disabled="disabled">
        <option value="off">No</option>
        <option value="on">Yes</option>
    </select>
</div>
<div data-role="popup" id="US_Popup" data-overlay-theme="c" data-theme="c" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" data-theme="c">
         <h1>Notice</h1>

    </div>
    <div role="main" class="ui-content">
         <h3 class="ui-title">Changing this answer will result in reanswering the subsequent questions.</h3>

        <div style="text-align:right; padding-top:20px"> <a id="US_changeNo" href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-rel="back">Dont Change</a>
 <a id="US_changeYes" href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-c" data-rel="back" data-transition="flow">Change my answer</a>

        </div>
    </div>
</div>

JavaScript

$("#US_toggle").click(function () {
    $('#US_Popup').popup('open');
});

$('#US_changeYes').click(function () {
    var curVal = $("#US_flipswitch").val();
    curVal == "off" ? $("#US_flipswitch").val("on").flipswitch( "refresh" ) : $("#US_flipswitch").val("off").flipswitch( "refresh" );
});