Java Script
const cardDropdownTemplate = document.querySelector('[Card-Dropdown-Template]');
const cardDropdownContainer = document.querySelector('[card-dropdown-container]');

SearchBoxMainNav.addEventListener('input', async(event) =>{
  var input = document.getElementById('SearchTerm').value;
  const card = cardDropdownTemplate.content.cloneNode(true).children[0];
  cardDropdownContainer.innerHTML = "";
  if (input != "") {
    var result = cardSearch(input);
    console.log(result);
    for (var i = 3; i > -1; i--) {
      const name = card.querySelector("[Ygo-Card-Name]");
      const desc =  card.querySelector("[Ygo-Card-Desc]");
      name.textContent = result[i].name;
      desc.textContent = result[i].desc;
      cardDropdownContainer.append(card);
    }
  console.log(card);
  console.log(result);
  }
})

Html
        <div class="dropdown-Content" card-dropdown-container ></div>
        <template Card-Dropdown-Template>
            <div class="card-dropdown">
                <div class="card-name" Ygo-Card-Name></div>
                <div class="card-description" Ygo-Card-Desc></div> 
            </div>
        </template>

So I have this code, when it executes it listens for an input then sends that input into my api searcher, it searches the api for the 4 most simmilar listings in name then Uses a dom template to create a box and puts all the information in it so i can make a Dropdown.

My problem is currently it is only creating one Box and is just overwriting the information in that one box instead of making multiple boxes. Am I just using append wrong or what? When i watch it in slow mo The data gets overwriitten even before the append is reached in the code, so maybe its just drawing the template in real time after the append and the append only makes a new box that first time then does nothing the rest of the times?