Initialize dialog with countdown and alert

HTML

<link
  rel="stylesheet"
  href="https://code.jquery.com/ui/1.14.2/themes/base/jquery-ui.css"
/>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.2/jquery-ui.js"></script>

<div id="dialog-confirm" title="Aktion auslösen?">
  <p>
    <span
      class="ui-icon ui-icon-alert"
      style="float:left; margin:12px 12px 20px 0;"
    ></span
    >In <span id="s1"></span> Sekunden wird eine Aktion ausgelöst. Weiter?
  </p>
</div>

<p>
  Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna.
  Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet
  rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.
</p>

JavaScript

$(function () {
  $('#dialog-confirm').dialog({
    resizable: false,
    height: 'auto',
    width: 400,
    modal: true,
    buttons: {
      Weiter: function () {
        closeDialog(true);
      },
      Abbruch: function () {
        closeDialog(false);
      },
    },
  });

  function closeDialog(action) {
    clearInterval(iv);
    if ($('#dialog-confirm').dialog('isOpen')) {
      $('#dialog-confirm').dialog('close');
      if (action) {
        alert('Aktion!!');
      }
    }
  }

  let t1 = 30;
  let iv = setInterval(function () {
    document.getElementById('s1').innerHTML = t1;
    if (--t1 <= 0) {
      closeDialog(true);
    }
  }, 1000);
});