Here is my code. It all works as intended except for the deleteButton event listener. It will delete the book element from the page and remove it from the myLibrary array, but if I try to delete the last element after I have already deleted one of the previous elements then it won't be removed from the myLibrary array even though it was removed from the DOM. Now I currently have the data-attribute called data-index using the dataset property corresponding to the index of the object in the myLibrary array but I want to know if it is possible for me to have that attribute reset to the new index of the myLibrary array after another element is deleted. I feel like that will fix my problem but I've tried every solution I could think of including re-writting the entire code and still can't find a solution. it's been days and I'm starting to lose my mind.

const bookShelf = document.querySelector('.books-tab');
const addBookButton =  document.getElementById('bookButton');
const buttonTab = document.querySelector('.button-tab');
const formElement = document.getElementById('formElement');

 let myLibrary = [];
 let libraryQueue = [];

    function Book(title, author, pageCount, readYet){
        this.title = title,
        this.author = author,
        this.pageCount = pageCount,
        this.readYet = readYet,
        this.info = function(){
            console.log(title, author, pageCount, readYet);
        }
    }

addBookButton.addEventListener('click', function() {
    let book = new Book();
    book.title = document.getElementById("title").value;
    book.author = document.getElementById("author").value;
    book.pageCount = document.getElementById("pages").value;
    myLibrary.push(book);
    libraryQueue.push(book);
    displayBooks();
    formElement.reset();
    libraryQueue.length = 0;
})

function displayBooks(){
    let addBook;
    let addAuthor;
    let deleteButton;
    
    for(let i = 0; i < libraryQueue.length; i++){ 
        addBook = document.createElement('div');
        addAuthor = document.createElement('p');
        deleteButton = document.createElement('button');
        
        addBook.textContent = `"${libraryQueue[i]['title']}"`;
        addAuthor.textContent = `-${libraryQueue[i]['author']}`;
        deleteButton.textContent = `Delete`;
        
        bookShelf.appendChild(addBook);
        addBook.appendChild(addAuthor);
        addBook.appendChild(deleteButton);        
    }

    for(let i = 0; i < myLibrary.length; i++){
        addBook.dataset.index = i;
    }
    
    deleteButton.addEventListener('click', function(){
        myLibrary.splice(addBook.dataset.index, 1);
        addBook.remove();
        delete addBook.dataset.index;
        console.log(myLibrary);
    })
}