title: for of loop return same item multiple times api double fetch
body: <p><a href="https://i.stack.imgur.com/qWAh5.jpg" rel="nofollow noreferrer">Console and browser display this </a>In the first for of loop I get 10 different results as expected. in the second for loop when i call it it gives me 10 times the same result.
  why this happens and how do i fix it?</p>
  <pre><code> const inputValue = document.getElementById(&quot;searchbarInput&quot;).value;
   const searchUrl = `https://stock-exchange-dot-full-stack-course-services.ew.r.appspot.com/api/v3/search?query=${inputValue}&amp;limit=10&amp;exchange=NASDAQ`;
  
  const options = {
  filter: '',
  sort: 1}
  async function displaydata() {
  let url = searchUrl;
  let response = await fetch(url);
  let data = await response.json();
  
  //log company info
  
  const mappedList = data.map((x) =&gt; ({
      name: x.name,
      symbol: x.symbol,
      ceo: x.ceo
  }))
  
  
  for (let info of mappedList) {
      const companyInfo = await fetchMoreInfo(info.symbol);
      ceo = companyInfo.profile.ceo; // here returns a 10 different items
  }
  
  document.getElementById('root').replaceChildren();
  
  for (comp of mappedList) {
      const div = document.createElement('div');
      div.innerHTML = `&lt;a href=&quot;/company.html?symbol=${comp.symbol}&quot;&gt;${ceo} ${comp.name}(${comp.symbol})&lt;/a&gt;` + &quot;&lt;br&gt;&quot;;
      document.getElementById('root').appendChild(div); //here it gives me the same  10 itmes}}
  
  const fetchMoreInfo = async(companySymbol) =&gt; {
  let url = `https://stock-exchange-dot-full-stack-course-services.ew.r.appspot.com/api/v3/company/profile/${companySymbol}`;
  let response = await fetch(url);
  let compData = await response.json();
  return compData;
  </code></pre>
  <p>}</p>