Issue with my .map() method returns a render of DOM elements

JavaScript
1

So its clear that if you open up the chrome dev tools and look at the DOM tree structure, that once you enter a movie in input and then it renders divs, the divs actually continue to go inside of one another vs staying separate. What do I need to do to fix this?

my goal for the DOM tree within the ‘section’ parent element, is to look something like this once rendered:

<section> 
    <div> rendered movie card</div>
    <div> rendered movie card</div>
    <div> rendered movie card</div>
    <div> rendered movie card</div>
    <div> rendered movie card</div>
     ........etc
</section>

instead of:

<section> 
     <div>
             rendered movie card
             <div>
             rendered movie card
                   <div>
                           rendered movie card
                   </div>
            </div>
     </div>
</section>

Also, I have been told it is bad to post your api key on forums, but given that its a free api, does it really matter? or is the concern relate more to paid apis when you enter financial information?

Thanks in advance for the help.

JS

// VARIABLE LIBRARY
let searchEl = document.querySelector('#search')
let movieCardBoxEl = document.querySelector('#movieCardBox')
// moviecard.setAttrbiute style and add borders and stuff
let movieCardEl = document.querySelector('#movieCard')
let movieTitleEl = document.querySelector('#movieTitle')


// SEARCH FLICK
searchEl.addEventListener('click', () => {
  let inputEl = document.querySelector('#input')
  console.log('clicked');

  // DATA 
  const url = `https://imdb8.p.rapidapi.com/auto-complete?q=${inputEl.value}`;
  const options = {
  method: 'GET',
  headers: {
    'X-RapidAPI-Key': '4165450571mshe599f8c8e4e26f2p132bb2jsn0e744e67b61b',
    'X-RapidAPI-Host': 'imdb8.p.rapidapi.com'
  }
};

  // FETCH -- YOU HAVE A HARD STOP OF 500 CALLS
  fetch(url, options)
    .then(res => res.json())
    .then((data) => {
      console.log('data: ', data.d[0]);

      movieCardBoxEl.innerHTML = data.d.map((title) => {
        return `
        <div class="movie-cards">
          <h2>${title.l}</h2>
          <img class="movie-img" src="${title.i.imageUrl}" alt="" srcset="">
        </dvi>  
        `
      }).join('')
      
    })
    .catch(err => console.error('error:' + err));
})

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">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>





  
  <header>
    <div>
      <h1>Movies</h1>
    </div>
    <input id="input" type="text">
    <button id="search">Search</button>
  </header>
  
  <section id="movieCardBox">
    <!-- MOVIE CARD RENDERS -->
  </section>





  <script src="test.js"></script>
</body>
</html>

CSS

.movie-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px red solid;
  margin: 10px 0 10px 0;
}

h2 {
  border: 1px solid red; 
}

.movie-title {
  border: 1px solid red; 
}

.movie-img {
  float: left;
  width:  100px;
  height: 100px;
  object-fit: cover;
}
2

closing tag is broken here, right inside return of map(), that may be the cause of rendered HTML mess

3

LOL… WOW…Classic lol. Thank you!!