JSFiddle - React, Tailwind, and code Playground

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="https://fonts.googleapis.com/css2?        
 family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Filmovizija</title>
  </head>
  <body>
    <h1>Filmovizija</h1>
    <div class="prozor"></div>
    <h2>Shooping bag</h2>
    <div class="shooping-cart"></div>

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

JavaScript

const options = {
  method: "GET",
  headers: {
    "X-RapidAPI-Key": "cd782e9b03mshbd50bac036f1802p16179djsn48c38f33f263",
    "X-RapidAPI-Host": "online-movie-database.p.rapidapi.com",
  },
};

const main = document.querySelector(`.prozor`);
const shoopingCart = document.querySelector(`.shooping-cart`);

fetch(
  "https://online-movie-database.p.rapidapi.com/auto-complete?q=hacker",
  options
)
  .then((response) => response.json())
  .then((data) => {
    const list = data.d;
    list.map((item) => {
      const name = item.l;
      const rank = item.rank;
      const price = Math.floor(rank / 100);
      const poster = item.i.imageUrl;
      const movie = ` <div class="movie">
               <img src=${poster} alt="${name}" />
                           <div class="movie-info">
                              <h3>${name}</h3>
                              <span>#${rank}</span>
                            </div>
                            <div class="kupi">
                              <button class="addToBag">Kupi film</button>
                              <span>${price} HRK</span>
                            </div>
                    </div>`;
      main.innerHTML += movie;

      //---------------------------------- dodaj u kosaricu =--------------------------//

      const button = document.querySelectorAll(`.addToBag`);
      button.forEach((button) => {
        button.addEventListener(`click`, function (e) {
          const clicked = e.target;
          const kupi = clicked.closest(`.kupi`);
          const cijena2 = kupi.querySelector(`span`).innerText;
          const cijena = cijena2.split(` `)[0];
          const parent = kupi.closest(`.movie`);
          const imeFilma = parent.querySelector(`.movie-info h3`).innerText;
          const imgSrc = parent.querySelector(`img`).src;

          const singleItem = `
          <div class="single-item">
             <span class="material-symbols-outlined deleteItem"> close </span>
               <img...