JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://demos.jquerymobile.com/1.4.2/js/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.2/css/themes/default/jquery.mobile-1.4.2.min.css">
<div data-role="page" id="main" >
    <label for="flip">Flip toggle switch select:</label>
    <select id="flip" data-role="flipswitch">
        <option value="animal">Lion</option>
        <option value="flower">Rose</option>
    </select>
    <br />
    <a href="#" class="ui-btn ui-btn-inline" id="setlion">Set Lion</a>
    <a href="#" class="ui-btn ui-btn-inline" id="setrose">Set Rose</a>
</div>

CSS

#main { padding: 3em }

JavaScript

$( document ).on( 'vclick', '#setlion', function( e ) {
    $( "#flip" ).val('animal').flipswitch('refresh');
});

$( document ).on( 'vclick', '#setrose', function( e ) {
    $( "#flip" ).val('flower').flipswitch('refresh');
});

$( document ).on( 'change', '#flip', function( e ) {
    alert( 'This alert should only appear throug direct interaction with the flipswitch NOT when the buttons are clicked' );
});