JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn-group form-group" data-toggle="buttons">
    <label id="lblfilter-green" class="btn btn-success">
        <input type="checkbox" id="filter-green" />Off</label>
    <label id="filter-amber" class="btn btn-warning">
        <input type="checkbox" id="filter-amber" />Off</label>
    <label id="filter-red" class="btn btn-danger">
        <input type="checkbox" id="filter-red" />Off</label>
</div>

JavaScript

$('#lblfilter-green').on('click', function (e) {
                var value = $('#filter-green').is(':checked');                

                if (value) {    
                    $('#lblfilter-green').text("Off");
                } else {
                    $('#lblfilter-green').text("On");
                }
            });