I have a fetch from an API (sorted alphabetically) which I have put in an array ("peopleArray"). This array I iterate over in a forEach.

I want to be able to reverse the order of the list. However, every time a click my "sorting"-button the list duplicates itself in the reverse order.

How do I get it to rewrite/replace/rearrange the original list instead of adding a new reversed one? What am I missing in my sorting?

This is my original forEach

```

peopleArray.forEach((person) => {
      cardbox.innerHTML += `
          <div class="cardliststyle">
          <img class="profilepic" src="${person.picture.medium}" alt="picture" />
          <span class="circle"></span>
          <span class="square"></span>
            <div class="bg-white">
            <div class="name-city">
              <p class="name">${person.name.first} ${person.name.last}</p>
              <p class="city">${person.location.city}</p>
            </div>
            <div class="phone-email">
              <a class="email" href="mailto:${person.email}"> <i class="fa fa-envelope"></i></a>
              <a class="phone" href="tel:${person.phone}"><i class="fa fa-phone"></i></a>
            </div>
            </div>
          </div>

```

And this is the sorting-function/ forEach

```

sort.addEventListener("click", function () {
  peopleArray.reverse();

  peopleArray.forEach((person) => {
    cardbox.innerHTML += `
    <div class="cardliststyle">

      <img class="profilepic" src="${person.picture.medium}" alt="picture" />
      <div class="bg-white">
      <div class="name-city">
        <p class="name">${person.name.first} ${person.name.last}</p>
        <p class="city">${person.location.city}</p>
      </div>
      <div class="phone-email">
        <a class="email" href="mailto:${person.email}"> <i class="fa fa-envelope"></i></a>
        <a class="phone" href="tel:${person.phone}"><i class="fa fa-phone"></i></a>
      </div>
      </div>
    </div>

`;
  });
});

```