Help!, I've been racking my brain for hours but I still can't figure out what's wrong here.

Here's what I wanted to happen, every time I add a new book, it should display on the page, it does display. However, when I add in a new Book, the first Book I had added also shows up. I'm guessing it has something to do with the loop? How can I make it only display the newly added object in the array.

and if loop has nothing to do with it, why is it going like this? what is it that I am doing wrong?

```js
//DOM Elements
        const modal = document.querySelector('.modal-container');
        const openModal = document.querySelector('.add-book-btn');
        const closeModal = document.querySelector('.modal-close-btn');
        const form = document.querySelector('.add-book-form');
        const bookGrid = document.querySelector('.book-grid');
        //open the add new book form
        openModal.addEventListener('click', () => {
            modal.classList.add('active');
        })
        //close the form
        closeModal.addEventListener('click', () => {
            modal.classList.remove('active');
        })

        //store book object in a simple array 
        let myLibrary = [];

        // object constructor
        function Book(title, author, pages, status) {
            this.title = title;
            this.author = author;
            this.pages = pages;
            this.status = status;
        }

        //function that can take user’s input and store the new book objects into an array. 
        function takeBookInfo() {
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                let book = new Book(title.value, author.value, pages.value, status.value);
                //store the new object into an array.
                myLibrary.push(book);
                console.log(myLibrary);
                console.log(book);
                //hide modal as soon as the form is submitted
                modal.classList.remove('active');
                //reset form as soon as the form is submitted
                form.reset();
                //loop through existing and new Book object in the array
                addBookToLibrary();

            })
        }
        takeBookInfo();

        //function that loops through the array and displays each book on the page
        function addBookToLibrary() {
           for (let i = 0; i < myLibrary.length; i++) {
              displayBook(myLibrary[i]);
           }
        }

        //displays each book on the page
        function displayBook(book) {
            const bookCard = document.createElement('div');
            bookCard.className = 'book-card';

            const bookTitle = document.createElement('p');
            bookTitle.className = 'book-title';
            bookTitle.textContent = book.title;
            bookCard.appendChild(bookTitle);

            const bookAuthor = document.createElement('p');
            bookAuthor.textContent = `by ${book.author}`;
            bookAuthor.className = 'book-author';
            bookCard.appendChild(bookAuthor);
            const bookPages = document.createElement('p');
            bookPages.className = 'book-pages';
            bookPages.textContent = `${book.pages} pages`;
            bookCard.appendChild(bookPages);

            bookGrid.appendChild(bookCard);
        }
```

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

:root {
    --header-color: #49361c;
    --content-color: #eeeadf;
    --box-shadow: 0 2px 4px 0 rgba(0,0,0,.2), 0 2px 3px 0 rgba(0,0,0,.2);
    --card-color: #fffbf7;
    --title-color: #362813;
    --button-color: #a58b63;
}

/* Header */
.header {
    min-height: 15vh;
    min-width: 100vw;
    box-shadow: var(--box-shadow);
    position: relative;
    z-index: 1;
}
.container {
    display: flex;
    background-color: var(--header-color);
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

.logo {
    min-height: 15vh;
    display: flex;
    align-items: center;
    gap: 25px;
    color: var(--content-color);
    text-shadow: 2px 2px 10px#362813;
}

.logo span {
    font-size: 6.5rem;
}

.title {
    font-family: 'Bilbo Swash Caps', cursive;
    font-size: 4rem;
    letter-spacing: 1.2rem;  
}

.add-book-btn {
    border: none;
    font-size: 3rem;
    border-radius: 50%;
    padding: 0 10px;
}

.add-book-btn:hover {
    cursor: pointer;
    background-color: #e0dede;
}

/* Main Content */
.main-container {
    min-height: 100vh;
    min-width: 100vw;
    background-color: var(--content-color);
    padding: 40px;
    z-index: 1;
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr));
    gap: 40px;
    min-width: 100%;
}

/* BOOK CARD */

.book-card {
    background-color: var(--card-color);
    box-shadow: var(--box-shadow);
    border-radius: 15px;
    padding: 30px 40px;
    min-width: 100%;
    min-height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 20px;

    /* PAPER FOLD */
  position: relative;

}

/* folding */
.read::before {
    content:"";
    position: absolute;
    top: 0px;
    right: 0px;
    border-style: solid;
    border-bottom-left-radius: 8px;
    border-width: 0 40px 40px 0;
    border-color: #dfd9d1 var(--content-color);
}

.book-card p {
    flex-basis: 0px;
    flex-grow: 1;
    min-width: 100%;
    letter-spacing: .2rem;
}

.book-title {
    font-weight: 700;
    font-size: 3rem;
    line-height: 2.8rem;
    font-family: 'Bilbo Swash Caps', cursive;
    color: var(--title-color);
}

.book-author, .book-pages {
    font-size: 1.2rem;
    line-height: 2rem;
    font-weight: 700;
    font-family: 'Kalam', cursive; 
}

.button-group {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.button-group i {
    font-size: 1.5rem;
    background-color: var(--content-color);
    color: var(--button-color);
    width: 50px;
    height: 50px;
    padding: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-group i:hover {
    cursor: pointer;
}

/* Modal */
.modal-container {
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100vw;
    height: 100vh;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    z-index: 0;
    pointer-events: none;
}

/* for the modal to be visible */
.active {
    opacity: 1;
    z-index: 2;
    pointer-events: all;
}

.add-book-form {
    display: flex;
    flex-direction: column;
    padding: 20px 30px;
    gap: 20px;
    background-color: var(--card-color);
    min-width: 400px;
    min-height: 40vh;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    user-select: none;
    z-index: 0;
}

.add-book-form h1 {
    color: var(--title-color);
}

input[type=text], input[type="number"] {
    height: 3.5vh;
    font-size: 1.2rem;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid var(--header-color);
}

/* Toggle Button */
.toggle-button {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.label {
    font-size: 1.3rem;
    font-weight: 550;
    color: var(--title-color);
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
     transition: .4s;
}

input:checked + .slider {
    background-color: var(--button-color);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--button-color);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider {
    border-radius: 34px;
}

.slider:before {
    border-radius: 50%;
}

.button {
    padding: 10px;
    background-color: var(--button-color);
    border: none;
    border-radius: 8px;
    font-size: 1.5rem;
    color: var(--card-color);
    font-weight: 520;
    cursor: pointer;
}

.button:hover {
    background-color: #866749;
}

.modal-close-btn {
    position: absolute;
    font-size: 2.3rem;
    right: 10px;
    top: 2px;
    opacity: 0.2;
    cursor: pointer;
}

.modal-close-btn:hover {
    opacity: 1;
}

@media only screen and (max-width: 600px) {

    .container {
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

    .add-book-btn {
        border: none;
        font-size: 2rem;
        border-radius: 50%;
        padding: 0 10px;
    }

    .book-grid {
        display: flex;
        flex-direction: column;
    }
}
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Library</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300&family=Roboto:wght@100&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/70237b74b7.js" crossorigin="anonymous"></script>

</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <span class="material-symbols-outlined">
                    auto_stories
                </span>
                <h1 class="title">Library</h1>
            </div>
            <button class="add-book-btn">+</button>
        </div>
    </header>
    <main class="main-container">
        <div class="book-grid">
            <div class="book-card read">
                <p class="book-title">Don Quixote</p>
                <p class="book-author">by Miguel de Cervantes</p>
                <p class="book-pages">992 pages</p>
                <div class="button-group">
                    <i id="sample" class="fa-solid fa-book-open" title="have read"></i>
                    <i class="fa-solid fa-pen-to-square" title="edit"></i>
                    <i class="fa-solid fa-trash-can" title="remove"></i>
                </div>
            </div>
        </div>
    </main>

    <!--Modal-->
    <div class="modal-container">
        <form class="add-book-form" method="post">
            <span class="modal-close-btn">&times;</span>
            <h1>Add New Book</h1>
            <input type="text" id="title" placeholder="Title" required>
            <input type="text" id="author" placeholder="Author" required>
            <input type="number" id="pages" placeholder="No. of Pages" required>

            <!-- Toggle Button-->
            <div class="toggle-button">
                <p class="label">Have you read this book?</p>
                <label class="switch">
                    <input type="checkbox" id="status">
                    <span class="slider"></span>
                </label>
            </div>

            <button class="button submit" type="submit">Submit</button>
        </form>
  </div>
  </body>
```

For more context, I am actually doing an assignment project from [The Odin Project](https://www.theodinproject.com/lessons/node-path-javascript-library) and one of the objectives is to...

> 
> 3. Write a function that loops through the array and displays each book on the page.
> 
> 
>