Как увеличить id элемента при динамическом создании в JS?

[b3ng3r]

По ходу написания сайта столкнулся с подключением js, так как в данном языке я не силен, созревает ряд вопросов. Вот один из них.
Имею данный код, необходимо сделать чтобы при динамическом создании "ячеек" с содержимым в начале добавлялся дополнительный пустой див с уникальным id. от 1 до 20.

getMovies(API_URL_POPULAR);

async function getMovies(url) {
  const resp = await fetch(url, {
    headers: {
      "Content-Type": "application/json",
      "X-API-KEY": API_KEY,
    },
  });
    
  const respData = await resp.json();
  showMovies(respData);
}

function getClassByRate(vote) {
  if (vote >= 7) {
    return "green";
  } else if (vote > 5) {
    return "orange";
  } else {
    return "red";
  }
}


            
      

function showMovies(data) {
  const moviesEl = document.querySelector(".movies");

  // Очистка фильмов
  document.querySelector(".movies").innerHTML = "";
  data.films.forEach((movie) => {
    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");
    movieEl.innerHTML = `
        <div class="movie__cover-inner">
        <img
          src="${movie.posterUrlPreview}"
          class="movie__cover"
          alt="${movie.nameRu}"
        
          />  
         
        
        <div class="movie__cover--darkened"></div>
      </div>
      <div class="movie__info">
        <div class="movie__title">${movie.nameRu}</div>
        <div class="movie__category">${movie.genres.map(
          (genre) => ` ${genre.genre}`
        )}</div>
        ${
          movie.rating &&
          `
        <div class="movie__average movie__average--${getClassByRate(
          movie.rating
        )}">${movie.rating}</div>
        `
        }
      </div>
    

        `;


 
    moviesEl.appendChild(movieEl);
  });
}
        

   

const form = document.querySelector("form");
const search = document.querySelector(".header__search");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const apiSearchUrl = `${API_URL_SEARCH}${search.value}`;
  if (search.value) {
    getMovies(apiSearchUrl);

    search.value = "";
  }
});

[Aetae]

data.films.forEach((movie, i) => {
// ...
`<div id="id-${i+1}"></div>`

Только обычно id тебе не нужен когда создаёшь много однотипных элементов. Привязывайся к классу.

[b3ng3r]

Благодарю, помогло