Second html Dialog opening and closing immediately when opened from first html dialog

I am trying to open a second HTML Dialog from a button on the first HTML Dialog using the HTML Dialog element. I can see the second dialog open for a split second then it closes both dialogs.
I have searched but can’t find anything that works.
Here is a shortened version of my code. You can run this code and it will explain what I want to happen as you click the buttons.

Let me mention that I have the code to post the information and it works, I just need the second HTML Dialog to open and stay open until the Post or Cancel button is clicked.
Thanks

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <div>
      <h2>Split Transaction</h2>
    </div>
    <button data-open-modal1>Add Transaction</button>
  </div>
  <dialog id="dialog1">
    <h3>This is dialog 1</h3>
    <p>This dialog allows the user to enter transaction information.</p>
    <p>If the transaction has to be split into two categories</p>
    <p>they would click on the Split button which would open dialog 2 on top of</p>
    <p>dialog 1 and allow dialog 2 information to be entered.</p>
    <p>Then the user would click Post to post dialog 2 information, dialog 2 would then close</p>
    <p>and return to dialog 1 (this dialog)</p>
    <p>where the user would click Post on dialog 1 to post the transaction data.</p>
    <form id="form" action="" method="post">
      <button id="transdialogsplitbutton" data-post-modal1 formmethod="dialog" value="split" onclick="split(this, value)">Split</button>
      <button id="transdialogsubbutton" data-post-modal1 formmethod="dialog" value="post" onclick="postrecurring(this, value)">Post</button>
      <button id="transdialogcancelbutton" data-close-modal1 formmethod="dialog" onclick="closedialog()">Cancel</button>
    </form>
  </dialog>

  <dialog id="dialog2">
    <h3>This is dialog 2</h3>
    <p>When the user clicks on Post it would post the information on this dialog 2</p>
    <p>and return to dialog 1 where the user will click on Post to post that information.</p>
    <form action="" method="post">
    <button id="transdialogsubbutton" data-post-modal2 formmethod="dialog" value="post" onclick="postsplit(this, value)">Post</button>
    <button id="transdialogcancelbutton" data-close-modal2 formmethod="dialog" onclick="closedialog()">Cancel</button>
    </form>
  </dialog>

  <script>
    const openModal1 = document.querySelector('[data-open-modal1]');
    const closeModal1 = document.querySelector('[data-close-modal1]');
    const postModal1 = document.querySelector('[data-post-modal1]');
    const modal1 = document.querySelector('#dialog1');

    openModal1.addEventListener('click', () => {
      modal1.showModal();
    });

    closeModal1.addEventListener('click', () => {
      modal1.close();
    });
  </script>

  <script>
    function postrecurring(element, value) {
      alert("Transaction Information Posted");
    };
  </script>

  <script>
    function split(element, value) {
      alert("Dialog 2 Should Open");
    };
  </script>

  <script>
    const openModal2 = document.querySelector('[data-open-modal2]');
    const closeModal2 = document.querySelector('[data-close-modal2]');
    const postModal2 = document.querySelector('[data-post-modal2]');
    const modal2 = document.querySelector('#dialog2');
  </script>

<script>
      openModal2.addEventListener('click', () => {
      modal2.showModal();
    });

    closeModal2.addEventListener('click', () => {
      modal2.close();
    });
  </script>

  <script>
    function postsplit(element, value) {
      alert("Split Posted");
    };
  </script>

  <script>
    function closedialog(element, value) {
      alert("Dialog Closed");
    };
  </script>

</body>
</html>

I’ve tried everything I can think of but still can not find anything that works the way I want.