How can I implement a button click event listener that will survive DOM updates (ie. in a single-page application) [duplicate]

I am writing a ViolentMonkey userscript that will add an event listener on a button #mark-watched, so that when it is clicked, the #next-video button will be clicked automatically. The website doesn’t automatically mark the video as watched or automatically navigate to the next video upon completion so this is the purpose of the userscript.

The following is a simplified outline of the webpage on which my userscript will run

  <div class="container">
    <button id="next-video" type="button">Next Video</button>
    <button id="mark-watched" type="button">Complete section</button>
  </div>

Here is the userscript I’ve written:

  const mark_watched_btn = document.getElementById("mark-watched");
  const next_video_btn = document.getElementById("next-video");

  mark_watched_btn.addEventListener("click", (event) => {
    // wait an arbitrary 500ms to allow the page to submit its AJAX call marking the video as watched
    setTimeout(() => {
      next_video_btn.click();
    }, 500);
  });

The userscript works properly when the page is first loaded, but when the page navigates to the next video, the event listener I implemented will no longer work because the website is running via some javascript SAP framework, so when the entire .container component is reloaded and a new set of buttons are placed, the userscript (or ViolentMonkey) does not re-run the userscript.

Is there a way to have my click event listener on #mark-watched be applied to any and all future buttons that may appear on the page?