I have a scenario where I would like to copy the value from the first field selected with the class name "load". Then I want to place a monitor on that specific field for changes. I thought I had it all figured out by simply adding a class to the field called "monitor" then have a function that runs on change. Everything works, except the function that runs on change of the "monitor" class.

//Wait for page to load
$(document).ready(function () {

 
//Set start time from first load selected
  $('.load select').on('change', function(event) {

    //Get selected value
    var res = $(this).val();
    
    //Get current value of output field
    var current = $('.start input').val();

    //If output field is blank
    if (current.length == 0) {
    
      //$(this).classList.add('monitor'); Doesn't work for some reason
      //Add new class to selected field for monitoring changes
      document.getElementById(event.target.id).classList.add('monitor');
      
      //Set value of output field
      $('.start input').val(res + "m");
        
    }

  });
  
  
//Monitor for changes on first selected field and update output field
  $('.monitor select').on('change', function() {
    
    var res = $(this).val();
    
      $('.start input').val(res + "m");

  }); 

}); //End of on form load