Hi guys, how do I prevent adding multiple submissions on button click?

See more:

Javascript

I have a button(generate teams) that randomly splits in 2 an array of inputed data and adds the 2 new arrays to HTML. Everytime i press the button it adds the arrays to the html, so i end up with all the generated arrays beeing displayed . What i'm looking for is to have displayed only the the latest generated arrays, so whenver i press generate have the old generated be replaced by the new ones.

<pre>const getTeams = () => {
  const teamSize = Math.ceil(playersArr.length / 2);

  const teamOne = playersArr.slice(0, teamSize);
  const teamTwo = playersArr.slice(teamSize);

  teams.push(teamOne, teamTwo);

 let tCont = document.getElementById('teams-cont')
 let teamW = document.getElementById('teamOne')
 let teamB = document.getElementById('teamTwo')
  //  TEAM 1

    let ul = document.createElement('ul')
    ul.classList.add('team-container')
    for (let i of teamOne) { 
      let li = document.createElement('li')
      li.classList.add('team-sheet-player')
      li.innerHTML = i
      ul.appendChild(li)
      teamW.appendChild(ul);
      
    }   
    tCont.appendChild(teamW)
  teamSheet.appendChild(tCont);


  //  TEAM 2
    let ulB = document.createElement('ul')
    ulB.classList.add('team-container')
    for (let i of teamTwo) { 
      let li = document.createElement('li')
      li.classList.add('team-sheet-player')
      li.innerHTML = i
      ulB.appendChild(li)
      teamB.appendChild(ulB);
     
    }
    tCont.appendChild(teamB)
  teamSheet.appendChild(tCont);
}

genBtn.addEventListener('click', (e) => {
  getTeams()
})

What I have tried:

I do not want to prevent the button's function, i don't know where to start.