The Dialog is not showing

I’m on Library Project. The new book button is for adding books, and when i try adding another book, it duplicates. So I added container.textContent = '';
on my display function to remove duplicates. I successfully added one book, but when i tried adding another book, the modal doesn’t show up anymore and I inspected in on edge. This is what it says: Uncaught InvalidStateError: Failed to execute ‘showModal’ on ‘HTMLDialogElement’: The element is not in a Document. at HTMLButtonElement.

(even tho i have dialog.showModal(); and my dialog is present on html)

Here is my html:

`<dialog id = 'dialog'>
                <form>
                    <fieldset>
                        <label for="title">Title</label>
                        <input type="text" id="title" name="title">
                        <label for="author">Author</label>
                        <input type="text" id="author" name="author">
                        <label for="pages">Pages</label>
                        <input type="number" id="pages" name="pages">
                    </fieldset>
                   
        
                    <fieldset>
                        <legend>Have you read it?</legend>
                        <div class = 'yes'>
                            <input type="radio" id="read" name="read" value="read">
                            <label for="read">Yes</label>
                        </div>
                        <div class = 'no'>
                            <input type="radio" id="not_read" name="read" value="not_read">
                            <label for="not_read">No</label>
                        </div>
                       
                    </fieldset>
                    <div class = 'btn_submit'>
                        <button id = 'submit' type="submit">Submit</button>
                    </div>
                   
        
                </form>
            </dialog>`

My Javascript:

`document.addEventListener(‘DOMContentLoaded’, () => {

const container = document.querySelector('.container')
const Btn = document.querySelector('#mybtn');
const dialog = document.querySelector('#dialog');
const submitBtn = document.querySelector('#submit');

const myLibrary = [];

function Book (title,author,pages,read){
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.read = read;

    this.info = function(){
      return  `Title: ${this.title}
               Author: ${this.author}
               Pages: ${this.pages}  
               Read: ${this.read}`;
    }
}

function addBookToLibrary() {
    const title = document.querySelector('#title').value;
    const author = document.querySelector('#author').value;
    const pages = document.querySelector('#pages').value;
    const read = document.querySelector('input[name="read"]:checked').value;
    const newBook = new Book(title,author,pages,read);

    myLibrary.push(newBook)
  }

  /*
let addAnother = true;

while(addAnother){
    addBookToLibrary()
    addAnother = prompt("Would you like to add another book? ") == 'yes';
}*/

function display(){
    container.textContent = ''; 

    myLibrary.forEach(lib => {
        const book = document.createElement('div');
        book.classList.add('book');
        const newP = document.createElement('p');  

        book.appendChild(newP);
        container.appendChild(book);

        newP.textContent = lib.info();
    })

}



Btn.addEventListener('click', () =>{
dialog.showModal();
});

submitBtn.addEventListener('click', (event) =>{
    addBookToLibrary();
    display();
    event.preventDefault();
    dialog.close();

});











});

`

I’d appreciate answers, thank you.