JSFiddle - React, Tailwind, and code Playground

by woozyking

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
    <button type="button" class="btn btn-sm btn-danger toggle-switch" data-toggle-state="off">
        <i class="fa fa-2x fa-toggle-off"></i>
    </button>
    
    <button type="button" class="btn btn-sm btn-danger power-switch" data-toggle-state="off">
        <i class="fa fa-2x fa-power-off"></i>
    </button>
</div>

JavaScript

$('.toggle-switch').click(function(e) {
    e.preventDefault();
    
    if ($(this).attr('data-toggle-state') == 'off') {
        $(this).attr('data-toggle-state', 'on');
        $(this).removeClass('btn-danger').addClass('btn-success');
        $(this).find('i').removeClass('fa-toggle-off').addClass('fa-toggle-on');
    } else {
        $(this).attr('data-toggle-state', 'off');
        $(this).removeClass('btn-success').addClass('btn-danger');
        $(this).find('i').removeClass('fa-toggle-on').addClass('fa-toggle-off');
    }
});

$('.power-switch').click(function(e) {
    e.preventDefault();
    
    if ($(this).attr('data-toggle-state') == 'off') {
        $(this).attr('data-toggle-state', 'on');
        $(this).removeClass('btn-danger').addClass('btn-success');
    } else {
        $(this).attr('data-toggle-state', 'off');
        $(this).removeClass('btn-success').addClass('btn-danger');
    }
});