Подсвечивать кнопку при изменении полей формы (HTML, jQuery)

Предположим, что у нас на странице есть две группы полей, за изменениями в которых нужно следить и подсвечивать свою кнопку "Обновить" для каждой такой группы.

Типы полей в форме, естественно, могут быть разными это и input всех видов, и select, и textarea.

Например, имеем в html две такие группы полей:

<input class="savef1" type="text" id="txt1" value="данные">
<select class="savef1" id="sel">
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>
<label><input type="radio" value="1" class="savef1" name="vop"/>Зима</label>
<label><input type="radio" value="2" class="savef1" name="vop"/>Лето</label>
<input id="upd1" type="button" value="Обновить" />

<textarea class="savef2" id="txar">еще данные</textarea>
<label><input class="savef2" id="vbr" type="checkbox"/>выбрать</label>
<input id="upd2" type="button" value="Обновить" />

Здесь полям из первой группы задаём class='savef1', для второй группы class='savef2'.

Кнопкам "Обновить", которым мы будем менять цвет фона, задаём атрибут id='upd1' - для первой группы и id='upd2' - для второй группы.

Следующий скрипт на jQuery занимается подсветкой кнопки "Обновить" для каждой группы полей в отдельности. И снимает подсветку, если данные в полях вернуть в исходное значение.

set_red('savef1', 'upd1'); // запомнить изначальные данные
$("body").on("change paste keyup", ".savef1", function () {chk_red('savef1', 'upd1');}); // подсветить кнопку при изменениях

set_red('savef2', 'upd2'); // запомнить изначальные данные
$("body").on("change paste keyup", ".savef2", function () {chk_red('savef2', 'upd2');}); // подсветить кнопку при изменениях

function chk_red(cls, btn) {
 var flg = 0;
 msv = $("#" + cls + '_cl').val();
 ms = JSON.parse(msv);
 $('.' + cls).each(function(i){
  var type = this.type || this.tagName.toLowerCase();
  if (type == 'checkbox') {zn = +$(this).prop('checked');}
  else if (type == 'radio') {zn = +$(this).prop('checked');}
  else {zn = $(this).val();}
  if (ms[i] != zn) {flg = 1; return false;} else {flg = 0;}
 });
 if (flg == 0) {$('#' + btn).css('background','buttonface');} else {$('#' + btn).css('background','#ff8080');}
}

function set_red(cls, btn) {
 $("#" + cls + '_cl').remove();
 let ms = [];
 $('.' + cls).each(function(i){
  var type = this.type || this.tagName.toLowerCase();
  if (type == 'checkbox') {zn = +$(this).prop('checked');}
  else if (type == 'radio') {zn = +$(this).prop('checked');}
  else {zn = $(this).val();}
  ms.push(zn);
 });
 mss = JSON.stringify(ms);
 $("<input>", {id: cls + "_cl", type: "hidden", value: mss}).appendTo("body");
 $('#' + btn).css('background','buttonface');
}

В случае если группы полей создаются динамически, то полям каждой группы нужно автоматически с помощью random задать уникальные class, и id кнопки "Обновить" по которым будет происходить дальнейшая сверка.

// создадим 10 групп полей, за изменениями в которых нужно следить и подсвечивать свою кнопку "Обновить" для каждой такой группы
for(var i = 0; i<=10; i++) {
 let nid = makeid(6); 
 let htm = '<textarea class="txar ' + nid + '">еще данные</textarea>
<label><input class="vbr ' + nid + '" type="checkbox"/>выбрать</label>
<input id="' + nid + '_bt" type="button" value="Обновить" />';
 $('body').append(htm); // запишем группу полей в конец body
 set_red(nid, nid + '_bt'); // запомнить изначальные данные
 $("body").on("change paste keyup", "." + nid, function () {chk_red(nid, nid + '_bt');}); // подсветить кнопку при изменениях
}

// генерирует случайный набор букв на английском
function makeid(length) {
 let result = '';
 const characters = 'abcdefghijklmnopqrstuvwxyz';
 const charactersLength = characters.length;
 let counter = 0;
 while (counter < length) {
  result += characters.charAt(Math.floor(Math.random() * charactersLength));
  counter += 1;
 }
 return result;
}