How to stop the chain after trigger addEventListener?

So I have an addEventListener function which will trigger the addEventListener in two different buttons when click on it. When click the first buttons, it will then insert player-1 text or second button to insert player-2 text into athlete-ranking id innerHTML.

The function will trigger everything inside but I don't know how to stop the the other event for happening when either player-1 or player-2 button is clicked. I want to work both ways too. Meaning click the player-2 event so the player-1 event won't be triggered.

JS

rank.addEventListener('click', (e) => {
  e.preventDefault()
  if (some code) {
    const insertName = document.getElementById('athlete-ranking');
    // First Event
    const obtainFirstName = document.getElementById('player-1').innerHTML;
    insertName.innerHTML = obtainFirstName

    // Second Event
    const obtainSecondName = document.getElementById('player-2').innerHTML;
    insertName.innerHTML = obtainSecondName
   } else {
   some code
   }
)}

HTML

<button id="player-1">Player one</button>
<button id="player-2">Player two</button>
<span id="athlete-ranking"></span>

Thanks!

Yeah, why not you can achieve the desired behavior by using a single event listener with conditional statements to differentiate between the two buttons.

const insertName = document.getElementById('athlete-ranking');
const player1Btn = document.getElementById('player-1');
const player2Btn = document.getElementById('player-2');

document.addEventListener('click', (e) => {
  if (e.target === player1Btn) {
    // First Event: Insert player-1 text into athlete-ranking span
    insertName.innerHTML = player1Btn.innerHTML;
  } else if (e.target === player2Btn) {
    // Second Event: Insert player-2 text into athlete-ranking span
    insertName.innerHTML = player2Btn.innerHTML;
  } else {
    // Handle other cases if needed
  }
});

<button id="player-1">Player one</button>
<button id="player-2">Player two</button>
<span id="athlete-ranking"></span>