Hi, I am looking for help on the correct javascript that would accomplish clearing three input fields and pop up confirmation dialog within collection. I can archive for only the first collection, while 2nd or latter collections have no effect at all. Laserfiche guide have some samples, but seems not similar to my case.

https://www.laserfiche.com/support/webhelp/Laserfiche/10/en-US/administration/#../Subsystems/Forms/Content/Javascript-and-CSS/Javascript%20Customizations%20for%20Collections.htm%3FTocPath%3DForms%7CCreating%2520a%2520Form%7CCustomizing%2520a%2520Form%2520with%2520CSS%2520and%2520JavaScript%7C_____8

Below is my code and part of screenshot.

Any help/guide will be much appreciated.

$(document).ready(function() {
  
  var person, totalamount, amountperperson;
  var maxlimit;
  
  //check when Amount per Person change
 
  $('.MealAmountPerson').on('change', function() {
      totalamount= $('.MealAmount input').val();
	  amountperperson = parseFloat($('.MealAmountPerson input').val());
      person=$('.Person input').val();
      maxlimit=parseInt($('.Maxlimit input').val(),10);
	
      if ( (amountperperson>maxlimit) && (totalamount != '') && (person != '')) {
        // Empty no. of person,Total Amount, Amount per Person
        $('.Person input').val('');  
        $('.MealAmount input').val('');  
        $('.MealAmountPerson input').val('');  
        
        $('#WindowShade').addClass('Opened');
		$('#ConfirmationDialog').addClass('Opened');
        showConfirmDialog();
      }
  });
  
  function showConfirmDialog() {
    //Submit the form if the user presses the Yes button on the confirmation.
    $('#ConfirmationDialog .confirm-yes').on('click', function() {
      $('#WindowShade').removeClass('Opened');
      $('#ConfirmationDialog').removeClass('Opened');
    });
  }  
});