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(){      
      if($("#US_toggle .ui-flipswitch").hasClass('ui-flipswitch-active')){                
        $("#US_toggle .ui-flipswitch").removeClass('ui-flipswitch-active');
      }else{
        $("#US_toggle .ui-flipswitch").addClass('ui-flipswitch-active');
      };
    });