Make Save button Hot after grid data change

I

I would like to notify users visually that they have some unsaved changes in grid. When page loads user will see a grid with normal Save button. Then he make some changes and immediately Save button becomes Hot (green in my case) which signals to him that there are some unsaved changes.

I do it via JavaScript mutation observer feature, I am waiting for Edit button CSS style change. When this happens, I will change Save button class to hot. Just run the following code when page is loaded.

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var $target = $(mutation.target);
            if ($target.hasClass('is-active')) {
                var $save = $target.parent().parent().find('button.a-Button.a-Toolbar-item.js-actionButton[data-action="save"]');
                $save.addClass('is-active');
                //observer.disconnect();  // remove observer when fired
            }
        });
    });
    //
    $.each($('div.a-Toolbar-toggleButton.js-actionCheckbox.a-Toolbar-item[data-action="edit"] > label'), function(i, el) {
        // assign unique ID + apply tracker/observer
        $el = $(el);
        $el.attr('id', 'OBSERVE_' + $el.attr('for'));
        observer.observe($el[0], {
            attributes: true
        });
    });

I know that this is not the best way how to do it, but at least something.
Do you know a better way how to do this?