On/OFF button do not work

Question

Hi Team

 

I have switch button for on/off, but i cant see any error on inspecting it. Please help as it does not work when switching between. I dont know maybe its my order of calling both html libraries for style and javascript. Please see below my logic and assist, thanks.

 

<link href="https://raw.githack.com/jamiebicknell/Toggle-Switch/master/toggleswitch.css" rel="stylesheet" /> <pre lang="Javascript"><div class = "wrapper" align = "center"> <div class="btn-group" id="toggle_event_editing"> <button type="button" class="btn btn-info locked_active">OFF</button> <button type="button" class="btn btn-default unlocked_inactive">ON</button> </div> <div class="alert alert-info" id="switch_status">Switched off.</div> </div> <script src ="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> <script type='text/javascript' src='https://raw.githack.com/jamiebicknell/Toggle-Switch/master/jquery.toggleswitch.js'></script> <script type="text/javascript"> $('#toggle_event_editing button').click(function(){ if($(this).hasClass('locked_active') || $(this).hasClass('unlocked_inactive')){ /* code to do when unlocking */ $('#switch_status').html('Switched on.'); }else{ /* code to do when locking */ $('#switch_status').html('Switched off.'); } /* reverse locking status */ $('#toggle_event_editing button').eq(0).toggleClass('locked_inactive locked_active btn-default btn-info'); $('#toggle_event_editing button').eq(1).toggleClass('unlocked_inactive unlocked_active btn-info btn-default'); }); </script>