(Odin Project Rock paper scissors) How do I make results appear only once and not show up each time you play a round?

So everytime you press on a button, a round of rps play and displays computer and player points. But instead of points just adding, they add and appear again below, I tried moving brackets on the eventListener so that it doesn't include append results every time you press a button, but then I get playerSelection is not defined.

function computerPlay() {
  let choice = ["rock", "paper", "scissors"];
  let random = choice[Math.floor(Math.random() * choice.length)];
  return random;
}

let computerPoints = 0;
let playerPoints = 0;

function playRound(playerSelection, computerSelection) {
  if (playerSelection === computerSelection) {
    return ("It's a draw!");
  } else if ((playerSelection === "rock") && (computerSelection === "scissors")) {
    ++playerPoints
    return ("You win! Rock beats scissors");
  } else if (playerSelection === "rock" && computerSelection === "paper") {
    ++computerPoints
    return ("You lose! Paper beats rock");
  } else if (playerSelection === "paper" && computerSelection === "rock") {
    ++playerPoints
    return ("You win! Paper beats rock");
  } else if (playerSelection === "paper" && computerSelection === "scissors") {
    ++computerPoints
    return ("You lose! Scissors beat paper");
  } else if (playerSelection === "scissors" && computerSelection === "paper") {
    ++playerPoints
    return ("You win! Scissors beat paper");
  } else if (playerSelection === "scissors" && computerSelection === "rock") {
    ++computerPoints
    return ("You lose! Rock beats scissors");
  }

}

//Play an exact amount of rounds logic

function game() {
  //Create new div for results
  const container = document.querySelector('.container');
  const results = document.createElement('div');
  container.appendChild(results)

  //Make clicking buttons react to functions

  const buttons = document.querySelectorAll('button');
  buttons.forEach((button) => {
    button.addEventListener('click', () => {
      playerSelection = button.className;

      //Make a player result appear

      const playerpp = document.createElement('p');
      playerpp.style.color = 'blue';
      playerpp.textContent = 'Player points: ' + playerPoints;
      container.appendChild(playerpp);

      //Make a computer result appear

      const computerpp = document.createElement('p');
      computerpp.style.color = 'red';
      computerpp.textContent = 'Computer points: ' + computerPoints;
      container.appendChild(computerpp);

      //Make computer's choice appear
      let computerSelection = computerPlay();
      const computerChoice = document.createElement('p');
      computerChoice.textContent = "Computer plays: " + computerSelection;
      container.appendChild(computerChoice);

      //Make the actual battle appear

      const battle = document.createElement('p');
      battle.textContent = '' + playRound(playerSelection, computerSelection);
      container.appendChild(battle);

      if (computerPoints == 5) {
        alert("You lose!");
      } else if (playerPoints == 5) {
        alert("You win!");
      }

    })
  })
}

//console.log(("First to 3 wins!"));
game();

Via Active questions tagged javascript - Stack Overflow https://ift.tt/yfEC4AD