[b3ng3r]

Очередной вечер в попытке разобраться в работе js.
Вчера разобрался с подставлением уникальных ид при динамическом добавлении через js. На этот раз необходимо сделать следующее:
Имеем <div id="id-1"> ... </div> и таких 20 штук. То есть, <div id="id-2">...<div id="id-3"> и так далее. После этого имеем <div class="film_1">и точно так же до <div class="film_20">. Все что хочу сделать, это чтобы при нажатии на див с ид, тобишь <div id="4"> все остальные дивы с ид прятались по типу display none. И при этом <div class="film_4"> появлялся. Думаю задумка ясна. Но реализовать у меня не получается, как только не пробовал. Буду благодарен тому кто поможет.
Вот код с динамическим созданием дивов с ид и классом. Cтрока с id - 52. Строка с class'ом - 81

const API_KEY = 
      "1576af80-f100-440b-94bb-d19fb8e90583";
const API_URL_POPULAR =
  "https://kinopoiskapiunofficial.tech/api/v2.2/films/top?type=TOP_100_POPULAR_FILMS&page=1";
const API_URL_SEARCH =
  "https://kinopoiskapiunofficial.tech/api/v2.1/films/search-by-keyword?keyword=";

const API_FILM = "8498e5fa32d80e669ddc10908de7e3bd";




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, i) => {
    const movieEl = document.createElement("div");
     
        
    movieEl.classList.add("movie");
    movieEl.innerHTML = `
        <div id="id-${i+1}" href="">
        <a href="">
        <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>
    </div>

    <div class="film_${i+1}">
        <div class="film__name">${movie.nameRu}</div>
        <div class="film__poster"><img src="${movie.posterUrlPreview}" class="film__poster"></div>
        <div class="film__movie"><iframe src="https://v1630850415.bazon.site/kp/${movie.filmId}" frameborder="0" scrolling="no" allowfullscreen="" referrerpolicy="origin" width="800" height="452" class="film__movie"></iframe></div>
        <div class="film__description">${movie.description}</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 = "";
  }
});