Why clearInterval() doesn't work when Boostrap 5 Modal is shown?

Question

Need some help here. I feel my code is correct but it doesn't work. I want my setInterval() to stop as soon as I click on a Modal button but it doesn't, the screen turns black (background of Modal):

I have the following:

    var myTimer=null;

    function startTimer() {
      myTimer = setInterval(function () {
        //some function that updates every second
      }, 1000);
    };

    function stopTimer() {
      clearInterval(myTimer);
      myTimer=null;
    };


    startTimer(); // call startTimer() when loading the page


   {% for job in table %}   
      {% if job.status == "ok" %}

        $(document).on('show.bs.modal', '#jobModal{{ job.id }}', function (e) {
          console.log('works modal show'); //it prints
          stopTimer();
          console.log('after modal show'); // it prints
      });

        $(document).on('hidden.bs.modal', '#jobModal{{ job.id }}', function (e) {
          console.log('works modal hide'); //step not reached because screens turns black
          startTimer();
          console.log('after modal hide'); //step not reached...
        });
      {% endif %}
    {% endfor %}

I use a Django loop. What is interesting is that I'm able to print in the console the lines before and after calling stopTimer(), but the screen after a few milliseconds turns black with some opacity (the usual background of a modal bootstrap). What is wrong? I would like to stop the setInterval() so I could see the modal form when I click on the modal button. Thanks.