JSFiddle - React, Tailwind, and code Playground

by juErik

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page" data-theme="b" id="jqm-home">
    <div data-role="content">
        <div id="DT1S">
            <input type="button" id="DT1S" value="Start Job" />
        </div>
        <div id="STS">
            <input type="button" id="STS" value="Start Surveillance" />
        </div>
        <div id="STE">
            <input type="button" id="STE" value="End Surveillance" disabled/>
        </div>
        <div id="DT2E">
            <input type="button" id="DT2E" value="End Job" disabled/>
        </div>
    </div>
</div>

JavaScript

$('#DT1S').click(function() {
    alert('DT1S has been clicked');
    $('div#DT1S input[type=button]').button('disable');
    $('div#DT2E input[type=button]').button('enable');
});
$('#STS').click(function() {
    alert('STS has been clicked');
    $('div#STS input[type=button]').button('disable');
    $('div#STE input[type=button]').button('enable');
});
$('#STE').click(function() {
    alert('STE has been clicked');
    $('div#STE input[type=button]').button('disable');
    $('div#STS input[type=button]').button('enable');
});
$('#DT2E').click(function() {
    alert('DT2E has been clicked');
    $('div#DT2E input[type=button]').button('disable');
    $('div#DT1S input[type=button]').button('enable');
});