Terminating turbolinks:click event listener once a user has navigated away from a form

I have been tasked with creating an unsaved changes alert in a form partial for a Ruby on Rails app (full MVC architecture). While not new to Rails, I am new to Views, turbolinks, and jquery and have been struggling here and there, so please bear with me.

Users should encounter the alert when they have made changes to the form that are unsaved/not submitted, and attempt to navigate elsewhere in the app, close their tab/browser window, refresh the browser, or use the browsers navigation arrows.

Currently, the code is working somewhat as intended. My main issue is that the turbolinks:click event listener continues to listen for click events after the alert has been dismissed and the user begins to navigate away from the form. If I dismiss the alert, click anywhere else in the app, the alert reappears. I then have to dismiss the alert every time I click somewhere. If I click ‘cancel’ on the alert, it appears as if the alert windows have stacked on top of one another (likely the amount of times I clicked around).

I am writing this as a script inside of the _form partial.

How can I terminate the turbolinks:click event listener once the user has dismissed the alert?

This is my first question on stackoverflow – please let me know if any protocol wasn’t followed. Thanks!

<script>
 
    function unsavedChangesAlert() {

      // initialize
      let formChanged = false;

      // add selectors, array for readability/maintainability
      const formSelectors = [

        '.custom-control-input', //handles section (GL, WC, etc.) toggles

        '.gl_fields select',
        '.gl_fields input[type="checkbox"]',
        '.wc_fields select',
        '.wc_fields input.commaClass',
        '.wc_fields input[type="checkbox"]',
        '.auto_fields select',
        '.auto_fields input[type="checkbox"]',
        '.umb_fields select',
        '.umb_fields input[type="checkbox"]',
        '.pl_fields select',
        '.pl_fields input[type="checkbox"]',
        '.im_fields input.commaClass',
        '.oh_fields input.commaClass',
        '.gk_fields input.commaClass',
        '.cg_fields input.commaClass',
        '.pollution_fields input.commaClass',
        '.pollution_fields input[type="checkbox"]',
        '.re_fields input.commaClass',
        '.re_fields input[type="checkbox"]',
        '.ava_fields input.commaClass',
        '.ava_fields input[type="checkbox"]',
        '.db_fields input.commaClass',
        '.db_fields input[type="checkbox"]',
      ];

      //take formSelectors array, join into single string
      const formInputs = document.querySelectorAll(formSelectors.join(', '));

      // event listeners for form inputs
      $(formInputs).on('change keydown input', function() {
        formChanged = true;
      });


      //to prevent alert on form submission; set flag to false
      let formSubmitted = false;

      // add event listener for beforeunload (browser refresh, browser close window/tab)
      $(window).on('beforeunload', function(event) {
        if (formChanged && !formSubmitted) {
          event.preventDefault();
          window.scrollTo(0, document.body.scrollHeight);

        };
      }); 

 $('#edit_ins_reqs_form').submit(function(){
        //set flag to true when form is submitted
        formSubmitted = true;
      });

 let confirmationShown = false;

  $(document).on('turbolinks:click', function(event) {
  console.log('one');
  const editForm = $('#edit_ins_reqs_form');

  // check if the clicked element or its ancestors contain the edit form
  if (!$(event.target).closest('#edit_ins_reqs_form').length) {

    console.log("two")
    const saveButton = $(event.target).closest('.submit');

    //check to exclude the save button
    if (!saveButton.length && !$(event.target).hasClass('submit')) {
      if (!confirmationShown && !confirm('turbolinks!!! You have unsaved changes. Are you sure you want to leave this page?')) {
        event.preventDefault();
        $(window).scrollTop($(document).height());
        confirmationShown = true;
      } else {
        //remove event listener once triggered
        $(document).off('turbolinks:click')
      }
    }
    console.log("three")
  }
});



  };

  //call it
  $(document).on('turbolinks:load', function() { 
    unsavedChangesAlert();
  });

</script>