JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form">
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>    
  </select>
  <textarea></textarea>
</form>
<div id="state">
  
</div>
<button id="save">save</button>
<button id="read">read state</button>

JavaScript

(function($){
    $.fn.isDirty = function(handler) {
        var el = $(this);
      
        if(typeof el.data('isDirty') != 'undefined') {
          if(typeof handler == 'boolean')
            el.data('isDirty', handler);
          
          return el.data('isDirty');
        }
      
        el.data('isDirty', false);
      
        var _isExcludedKey = function (keyCode) {
          if(keyCode == 9)  return true; // tab
          if(keyCode == 37) return true; // arrow key left
          if(keyCode == 38) return true; // arrow key up
          if(keyCode == 39) return true; // arrow right
          if(keyCode == 40) return true; // arrow down
        };
         
        el.change(function(){ 
          el.data('isDirty', true);
          handler.call(this);
        });
      
        el.keyup(function(key) {
          if(!_isExcludedKey(key.keyCode)) {
            el.data('isDirty', true);
            handler.call(this);
          }
        });
    };
})(jQuery);

//init
$('#form').isDirty(function() {
  //optional callback
  $('#state').html('isdirty: ' + $('#form').isDirty());
});

$('#read').on('click', function(e) {
  $('#state').html('isdirty: ' + $('#form').isDirty());  
});

$('#save').on('click', function(e) {
  $('#form').isDirty(false);
  $('#state').html('isdirty: ' + $('#form').isDirty());  
});