Film Finder Project dynamic problem with Bootstrap

Hi fellow programmers,

So I was in Film Finder project and I took the initiative to take it a bit further and mess around with the API on my own web app.

I created an account at themoviedb.org and generated an API. Without a very specific goal, I am reading through the Developers’ Documentation and trying to figure things out. I recently learned about Promises and async/await and I am making experiments.

So, I am at the documentation Get Movie List (Genres) and all looks good, except for a little problem.

I create dynamically the elements with Javascript, but I want the following HTML output. (Desired output)

<div class="row m-3">
      <div class="col-sm-4">
        <div class="card">
          <div class="card-header text-center">Action</div>
          <div class="card-body">
            <blockquote class="blockquote mb-0">
              <p class="text-center">ID: 28</p>
            </blockquote>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="card">
          <div class="card-header text-center">Adventure</div>
          <div class="card-body">
            <blockquote class="blockquote mb-0">
              <p class="text-center">ID: 12</p>
            </blockquote>
          </div>
        </div>
      </div>
    </div>

I am getting this instead. (Not desired output)

<div class="row m-3">
  <div class="col-sm-4">
    <div class="card">
      <div class="card-header text-center">Action</div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p class="text-center">ID: 28</p>
        </blockquote>
      </div>
    </div>
  </div>
</div>;
<div class="col-sm-4">
  <div class="card">
    <div class="card-header text-center">Adventure</div>
    <div class="card-body">
      <blockquote class="blockquote mb-0">
        <p class="text-center">ID: 12</p>
      </blockquote>
    </div>
  </div>
</div>;

The problem that I am facing is that in Bootstrap you want only one row element and the following elements, which are inside a for loop, want only a col element, in order for the elements to be side by side.

Here is the script.js code.

const key = config.API_KEY;
const genre =
  "https://api.themoviedb.org/3/genre/movie/list?api_key=" +
  key +
  "&language=en-US";

async function getApi(url) {
  const response = await fetch(url);
  let data = await response.json();
  let arrImage = [
    "./images/action.jpg",
    "./images/adventure.jpg",
    "./images/animation.jpg",
    "./images/comedy.jpg",
    "./images/crime.jpg",
    "./images/documentary.jpg",
    "./images/drama.jpg",
    "./images/family.jpg",
    "./images/fantasy.jpg",
    "./images/history.jpg",
    "./images/horror.png",
    "./images/music.jpg",
    "./images/mystery.jpg",
    "./images/romance.jpg",
    "./images/science-fiction.jpg",
    "./images/tv.jpg",
    "./images/thriller.jpg",
    "./images/war.jpg",
    "./images/western.jpg",
  ];
  for (let i = 0; i < data.genres.length; i++) {
    let obj = data.genres[i];
    console.log("Name: " + obj.name + " -- ID: " + obj.id);

    if (i == 0) {
      // Genres row
      const row = document.createElement("div");
      row.classList.add("row", "m-3");

      // Genres col-4
      const col4 = document.createElement("div");
      col4.classList.add("col-sm-4");

      // Genres Card
      const genresCard = document.createElement("div");
      genresCard.classList.add("card");

      // Genres Header
      const genresHeader = document.createElement("div");
      genresHeader.classList.add("card-header", "text-center");
      genresHeader.innerHTML = `${obj.name}`;
      genresHeader.style.backgroundColor = "#5d5fb9";

      // Card Body
      const genresBody = document.createElement("div");
      genresBody.classList.add("card-body");

      // Blockquote
      const genresBlockquote = document.createElement("blockquote");
      genresBlockquote.classList.add("blockquote", "mb-0", "text-center");

      // Card paragraph
      const genresPara = document.createElement("p");
      genresPara.classList.add("text-center");
      genresPara.innerHTML = `ID: ${obj.id}`;

      // Card Image
      const genresImage = document.createElement("img");
      genresImage.src = arrImage[i];
      genresImage.classList.add("img", "img-fluid", "rounded");
      genresImage.style.width = "250px";
      genresImage.style.height = "auto";

      // Append Child
      row.appendChild(col4);
      col4.appendChild(genresCard);
      genresCard.appendChild(genresHeader);
      genresCard.appendChild(genresBody);
      genresBody.appendChild(genresBlockquote);
      genresBlockquote.appendChild(genresPara);
      genresBlockquote.appendChild(genresImage);
      document.body.appendChild(row);
    } else {
      // Genres row
      const row = document.createElement("div");
      row.classList.add("row", "m-3");

      // Genres col-4
      const col4 = document.createElement("div");
      col4.classList.add("col-sm-4");

      // Genres Card
      const genresCard = document.createElement("div");
      genresCard.classList.add("card");

      // Genres Header
      const genresHeader = document.createElement("div");
      genresHeader.classList.add("card-header", "text-center");
      genresHeader.innerHTML = `${obj.name}`;
      genresHeader.style.backgroundColor = "#5d5fb9";

      // Card Body
      const genresBody = document.createElement("div");
      genresBody.classList.add("card-body");

      // Blockquote
      const genresBlockquote = document.createElement("blockquote");
      genresBlockquote.classList.add("blockquote", "mb-0", "text-center");

      // Card paragraph
      const genresPara = document.createElement("p");
      genresPara.classList.add("text-center");
      genresPara.innerHTML = `ID: ${obj.id}`;

      // Card Image
      const genresImage = document.createElement("img");
      genresImage.src = arrImage[i];
      genresImage.classList.add("img", "img-fluid", "rounded");
      genresImage.style.width = "250px";
      genresImage.style.height = "auto";

      // Append Child
      col4.appendChild(genresCard);
      genresCard.appendChild(genresHeader);
      genresCard.appendChild(genresBody);
      genresBody.appendChild(genresBlockquote);
      genresBlockquote.appendChild(genresPara);
      genresBlockquote.appendChild(genresImage);
      document.body.appendChild(col4);
    }
  }
}

getApi(genre);

Lastly, how can I render the contents of the Javascript code into a specific part of HTML, say in main?

Any help or guidance is greatly appreciated!