I'm creating a book store for a project due in the next few days.

I need to inject 10 elements from an array into the html, 8 of them into 1 section and the last 2 in a 'featured' section.

My current JS file is printing the correct stuff into my html, but i'm having trouble getting the last 2 injected into the featured section.

fetch('https://www.googleapis.com/books/v1/volumes?q=HTML5')
    .then(response => response.json())
    .then(data => console.log(data));

function handleResponse(obj) {
    obj.items.forEach((item, index) => {
        if (index > 7) return; // returns 8 elements from array
        let div = document.createElement('div');
        div.className = 'books';
        div.innerHTML = `<img src="${item.volumeInfo.imageLinks.thumbnail}" class="thumbnails" alt="${item.singleTitle} by ${item.volumeInfo.authors[0]}" />
            <h4>${item.volumeInfo.title}</h1>
            <p><strong>${item.volumeInfo.authors}</strong></p>
            <h8>${item.volumeInfo.description}</h8>
            <br>
            <br>
            <h8>Pages:  ${item.volumeInfo.pageCount}</h8>`

        let container = document.querySelector('.booklist-cards');
        container.append(div);
    })
}

The code where I would like to inject the last 2 into my html is

<div>
    <div>
        <div class="booklist-featured">
            <h1>Featured</h1>
            <div class="booklist-featured">
                book1
            </div>
            <div class="booklist-featured">
                book2
            </div>
        </div>
    </div>
</div

I also need to limit the description to 140 characters.