Hello, I have 22 audiofile which has to be listen to only once, each audio is on each own page. Based on 

I have made a js function, which I put in the header of the document. This is how the function looks:

<script>
function playAudio(buttonNum) {
  var button = document.getElementById("audiobutton"+buttonNum); //grab button id
  var audio = document.getElementById("audiofile"+buttonNum); //grab audio id
  audio.play(); //play the audio once 
  button.style.visibility = "hidden"; //hide the button so that it can't be played anymore
 }
</script>

this is how html looks for the audio and button on the first page:
 

<button type="button" id="audiobutton1">Play Audio</button>
<audio src="https://brown.co1.qualtrics.com/CP/File.php?F=F_b71Dx0QXwJXSTj0" id="audiofile1"> </audio>

this is on the second page:

<button type="button" id="audiobutton2">Play Audio</button>
<audio src="https://brown.co1.qualtrics.com/CP/File.php?F=F_b71Dx0QXwJXSadfaef0" id="audiofile2">&nbsp;</audio>

etc.
 

and this is how I call the function in js associated with the above question html

Qualtrics.SurveyEngine.addOnload(function()
{
	var buttonNum=1;
	jQuery("#audiobutton1").on("click", playAudio(buttonNum));
});

and for the second page it is 
 

Qualtrics.SurveyEngine.addOnload(function()
{
	var buttonNum=2;
	jQuery("#audiobutton2").on("click", playAudio(buttonNum));
});

But what happens is this:
1. Button is already  hidden.
2. Correct Audio stats to play automatically, on itself - but it does it twice, with the slight delay, so voices overlap!

What do I do wrong? 

Thank you.