Your colleague has asked you for help. He wants to get two lists.
The first list is a list of items with the title of books from the BBC The Big Read.
The second list is a list of items with the authors of these books.
But the script in this case displays two identical lists.
Help your colleague and fix hix items search.
Do not change the search or console output order.

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Books</title>
    <style>
      .header {
        text-align: center;
        color:  rgb(255, 198, 0);
      }
      .section {
        display: grid;
        rows: repeat(6, 1fr);
        place-items: center;
        padding: 0 50px;
        gap: 20px;
      }
      .item {
        background-color:  rgb(255, 198, 0);
        color: white;
        font-size: 20px;
        padding: 10px;
        border-radius: 4px;
        text-align: center;
      }
      .book {
        font-size: 1rem;
      }
      .author {
        font-size: 0.8rem;
        text-align: right;
      }
      .favourite {
        color: black;
      }
    </style>
  </head>
  <body>
    <h2 class="header">BBC The Big Read - Top 5 Books </h2>
    <div class="section">
      <div class="item">
        <div class="book name">The Lord of the Rings</div>
        <div class="book author">by J.R.R. Tolkien</div>
      </div>
      <div class="item">
        <div class="book name">Pride and Prejudice</div>
        <div class="book author">by Jane Austen</div>
      </div>
      <div class="item">
        <div class="book name">His Dark Materials</div>
        <div class="book author">by Philip Pullman</div>
      </div>
      <div class="item">
        <div class="book name">The Hitchhiker's Guide to the Galaxy</div>
        <div class="book author">by Douglas Adams</div>
      </div>
      <div class="item">
        <div class="book name">Harry Potter and the Goblet of Fire</div>
        <div class="book author">by J.K. Rowling</div>
      </div>
    </div>
    <h2 class="header">My favourite book</h2>
    <div class="section">
      <div class="item">
        <div class="favourite name">You Don't Know JS </div>
        <div class="favourite author">Kyle Simpson</div>
      </div>
    </div>
  </body>
  <script>
    const booksAuthors = document.getElementsByClassName('book');
    const booksNames = document.getElementsByClassName('book');
    console.log('authors', booksAuthors);
    console.log('names', booksNames);
  </script>
</html>