Please I am new to JavaScript. I am trying to build a free mini game for some kids that will help to teach them what the name of a some baby animals are called. I have a list of 22 animals each in a div element. I want a predefined audio to be played for each div element clicked.

I have tried listing the first two audio in an array, it works fine when the first div element is clicked. But when the second div element is clicked, both audios in the array play at the same time.

I have read some answers to some related questions here but I haven't got a clear solution. I have also tried using variables for each audio instead of putting them in array and the issue did not change. I have also attempted to pause each previous sound while a new sound is fired, but I know that would be a verbose chunk of code and there could a better way to achieve this.

Here is my code, I feel there is something I am not doing well. Please assist me. Thank you.

    <div class="container-fluid border">
            <div class="cards-box row ">
                <div class="cards border animate__animated animate__fadeIn" id="card1" onclick="beer()">Beer</div>
                <div class="cards border " id="card2" style="display:none;" onclick="bee()">Bee</div>
                <div class="cards border " id="card3" style="display:none;" onclick="bird()">Bird</div>
            </div>
        </div>

<script>
var voiceOfSonia = [
  new Audio("./audio-files/Beers.mp3"),
  new Audio("./audio-files/bee.mp3")
];
let clickSound = new Audio("./audio-files/click.wav");
let pix1 = document.getElementById("card1");
pix1.addEventListener("click", beer);
let pix2 = document.getElementById("card2");
pix2.addEventListener("click", bee);

function beer() {
        clickSound.play();
  clickSound.volume = 0.3;
  clickSound.addEventListener("ended", function () {
    voiceOfSonia[0].play();
    voiceOfSonia[0].volume = 0.5;
    voiceOfSonia[0].addEventListener("ended", function () {
      document.getElementById("card2").style.display = "block";
    });
  });
}


function bee() {
  clickSound.play();
  clickSound.volume = 0.3;
  clickSound.addEventListener("ended", function () {
    voiceOfSonia[1].play();
    voiceOfSonia[1].volume = 0.5;
    voiceOfSonia[1].addEventListener("ended", function () {
      document.getElementById("card3").style.display = "block";
    });
  });
}
</script>