Loop Being Bypassed?

All of my individual components in the code below work perfectly. I have console.logged the loop, if I remove the function call for the second function from the first the numbers do not appear, and the second function returns the numbers joined by a space and a comma. However, my loop does not appear to be working as it only returns one group of numbers.

<html>

<body>

<p>Click the button to display a random number.</p>

<button onclick="pballmultiple()">Try it</button>

<p id="demo"></p>

<script>

function pballmultiple() {

for (var j = 0; j < 5; j++) { 

pballnumbers();

}  

}

function pballnumbers() {

var pballnums =[];  

for (var i = 0; i < 5; i++) { 

var randomNumber= Math.floor(Math.random() * 69)+1;

pballnums.push(randomNumber);

  document.getElementById("demo").innerHTML = pballnums.join(" - ");

}

}
![Index|450x500](upload://48m3vndgS9VUTxIMsel4BUI1R4u.png) 
</script>

</body>

</html>

Is there supposed to be a link?

I’m only quoting because the image is not displaying properly for me

Could you change the format of your code to text, and also explain the expected behavior of the code

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

You’re replacing everything on each iteration: innerHTML just replaces whatever was there before with what you specify