Trouble Repeating Button Functionality Across Various Data in Javascript

Question

I am working on TOP's Library project and I am getting stuck when it comes to pushing through buttons I have set up with functions in each "book"/"card".

I started with a single "book" in HTML and have buttons with corresponding buttons to remove the "book" or to "mark" it as read. However, when I transitioned to adding the details in Javascript via an array, the functionality of all the buttons is only modifying the first "book".

*I.e. if I click on the button on the second book to remove it - the first book gets removed instead. *

I'm fairly new to Javascript and have been on here digging through trying to find an answer, but so far haven't been able to find anything that has been successful. The last thing that seemed most promising was to append the 'createElement("button") within my function that maps through my array. This is adding a button, but it is at the end of my page, and I am still trying to figure out how to align it with an individual 'card/book'.

I appreciate any help you can provide!

Here's what I have:

let bookList = [
    {
        id: 1,
        title: "The Catcher and the Rye",
        author: "J.D. Salinger",
        pages: 232,
        category: "Classic",
    },
    {
        id:2, 
        title: "Pretty Things",
        author: "Janelle Brown",
        pages: 612,
        category: "Suspense"
    },
    {
        id:3,
        title: "Gone Girl",
        author: "Gillian Flynn",
        pages: 420,
        category:"Suspense"
    }
]


function markAsRead (){
    console.log('this book has been read')
    document.getElementById("book-item").classList.add('myClass');
};

function removeBook(){
    console.log("This book will no longer appear on your shelf")
    document.getElementById("book-item").style.display = "none";
    document.getElementById("bookMessage").innerHTML = "Hmm, this title has been removed."
    //document.getElementById("book-item").innerHTML = "hmm, this book seems to be missing";
};

const sectionCenter = document.querySelector('.bookshelf');

window.addEventListener('DOMContentLoaded', function(){
    displayBookItems(bookList);

    function displayBookItems (bookItems){
        let displayBooks = bookItems.map(function(item){
            return `<article class="book ${item.id}" id="book-item">
            <h2 id="book-title">${item.title}</h2>
            <h4 class= 'italic' id="author">${item.author}</h4>
            <h4 id="page-count">${item.pages}</h4>
            <h6 id="category">${item.category}</h6>
            <button class= 'btn read'id="read" onclick="markAsRead()">Have you read this book?</button>
       <br><br> <button class = 'btn remove' id="remove" onclick="removeBook()">Remove Book from Shelf</button>
            </article>`;
            
        });
        readBtn = document.createElement("button");
        readBtn.innerText = "I've read this book";
        document.body.appendChild(readBtn);
        readBtn.classList.add("btn");
        readBtn.type = "button";
        readBtn.addEventListener("click", () => {
            console.log('this book has been read')    
            document.getElementById("book-item").classList.add('myClass');}
            
        );

        displayBooks = displayBooks.join(" ")
        sectionCenter.innerHTML = displayBooks;
    }
})