jquery plugin

 // Simple stateful toggle plugin

(function($) {

    'use strict';

    

    $.fn.toggleState = function(options) {

        // Default options

        var settings = $.extend({

            activeClass: 'active',

            inactiveClass: 'inactive',

            onToggle: function() {}

        }, options);

        

        return this.each(function() {

            var $element = $(this);

            

            // Get the existing state from the element or initialize it

            var state = $element.data('plugin_toggleState');

            

            // If the plugin hasn't been initialized on this element yet

            if (!state) {

                // Initialize the state and store it using $.data()

                state = {

                    isActive: false,

                    toggleCount: 0

                };

                

                // Store the state object on the DOM element

                $element.data('plugin_toggleState', state);

                

                // Initialize the element appearance

                $element.addClass(settings.inactiveClass);

                

                // Set up click handler

                $element.on('click.toggleState', function() {

                    $element.toggleState('toggle');

                });

            }

            

            // Method invocation handling

            if (typeof options === 'string') {

                if (options === 'toggle') {

                    // Toggle the state

                    state.isActive = !state.isActive;

                    state.toggleCount++;

                    

                    // Update the element

                    if (state.isActive) {

                        $element.removeClass(settings.inactiveClass).addClass(settings.activeClass);

                    } else {

                        $element.removeClass(settings.activeClass).addClass(settings.inactiveClass);

                    }

                    

                    // Update the stored state

                    $element.data('plugin_toggleState', state);

                    

                    // Call the callback

                    settings.onToggle.call($element, state.isActive, state.toggleCount);

                }

                else if (options === 'status') {

                    // Return the current state

                    return state;

                }

                else if (options === 'destroy') {

                    // Clean up

                    $element.removeData('plugin_toggleState');

                    $element.off('.toggleState');

                    $element.removeClass(settings.activeClass + ' ' + settings.inactiveClass);

                }

            }

        });

    };

})(jQuery);

// Usage:

$(document).ready(function() {

    // Initialize the plugin

    $('.toggle-button').toggleState({

        activeClass: 'btn-success',

        inactiveClass: 'btn-secondary',

        onToggle: function(isActive, count) {

            console.log('Button toggled to: ' + (isActive ? 'active' : 'inactive'));

            console.log('Button has been toggled ' + count + ' times');

        }

    });

    

    // Get the state

    $('#statusButton').on('click', function() {

        var state = $('.toggle-button').first().toggleState('status');

        alert('First button state: ' + (state.isActive ? 'active' : 'inactive') + 

              '\nToggle count: ' + state.toggleCount);

    });

    

    // Programmatically toggle

    $('#toggleAllButton').on('click', function() {

        $('.toggle-button').toggleState('toggle');

    });

    

    // Destroy the plugin

    $('#resetButton').on('click', function() {

        $('.toggle-button').toggleState('destroy');

    });

});