ایجاد متغییر در forEach javascript

برنامه نویسی و توسعه
, ,
1

سلام من یک اسکریپت دارم که از omdb چند فیلم رو دریافت می‌کنه و میشه از بینشون انتخاب کرد و بعد id اون هارو می‌فرسته به سرور
اسکریپت اینه:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Movies Sorter by IMDb Ratings</h1>

    <main class="content">
      <div id="search">
        <input type="text" id="search-input">
        <button onclick="handleSearch()">Search</button>
        <h2 id="search-data-title">Search Results</h2>
        <div id="search-data"></div>
        <button onclick="handleAddMovie()">Add</button>  
      </div>

      <div id="output">
        <h2>Final List</h2>
        <div id="output-area">
        </div>
        <button onclick="handleSortMovies()">ارسال برای دریافت</button>
      </div>
      
    </main>

  </body>
</html>
<script>
const baseUrl = "https://www.omdbapi.com/";
var finalMovieList = [];

async function handleSearch() {
  const searchedMovie = document.getElementById("search-input").value;

  if (searchedMovie) {
    const response = await (
      await fetch(`${baseUrl}?apikey=1a72b1e4&s=${searchedMovie}`)
    ).json();
    const data = response.Search;

    const resultsArea = document.getElementById("search-data");
    resultsArea.innerHTML = "";

    data.forEach((movie) => {
      const div = document.createElement("div");
      div.className = "movie";

      const input = document.createElement("input");
      input.type = "checkbox";
      input.id = movie.imdbID;
const img  = document.createElement("img");
img.style.width="50px";
img.style.height="100%";
    img.src = movie.Poster;
      const span = document.createElement("span");
      span.innerText = movie.Title;

      div.appendChild(input);
      div.appendChild(img);
      div.appendChild(span);

      resultsArea.appendChild(div);
    });
  }

  document.getElementById("search-input").value = "";
}

function handleAddMovie() {
  const resultsArea = document.getElementById("search-data");
  const searchedMovies = Array.from(resultsArea.childNodes);

  searchedMovies.forEach((movie) => {
    if (movie.firstChild.checked) {
      finalMovieList.push({
        id: movie.firstChild.id,
        title: movie.lastChild.textContent,
      });
    }

    resultsArea.innerHTML = "";
  });

  renderFinalList();
}
function renderFinalList() {
  if (finalMovieList.length) {
    const listArea = document.getElementById("output-area");
    listArea.innerHTML = "";

    const list = document.createElement("ul");
    finalMovieList.forEach(({ id, title }) => {    
      const listItem = document.createElement("li");
  listItem.id = id;
      listItem.innerText = title;
      list.appendChild(listItem);
   });
    listArea.appendChild(list);
  }
}
function handleSortMovies(){ 
my_form=document.createElement('FORM');
my_form.name='movie';
my_form.method='GET';
my_form.action='omdb.php';
finalMovieList.forEach(({ id }) => {
my_tb=document.createElement('INPUT');
my_tb.type='TEXT';
my_tb.name= 'id';
my_tb.value= id ;
my_form.appendChild(my_tb); });
document.body.appendChild(my_form);
my_form.submit();
}
</script>

الان id های انتخابی با یک فرم و GET به omdb می‌فرسته
و لینک اینجور میشه:

omdb?id=tt0170016&id=tt0170016&id=...

من میخوام که درخواست ها اینجور ارسال بشه:

omdb?id=tt0170016&id2=tt0170016&id3=&id4=...

یعنی اولین id بشه ?id= ولی id های بعدی عدد داشته باشن مثلا id2= و id3= و…

الان میخوام که یک متغییر برای این کارم و ارسالش مثل لینک بالا باشه