Create a new div from the freshly created div

Question

I'm trying to create a new div when the audio ends. It works well for the first time: the new div appears just as I want. But it doesnt't work from the freshly created div: audio doesn't play, the new div doesn't appear.

What am I doing wrong? -_-

var button = document.getElementById("button-1");
var audio = document.getElementById("audio-1");
var audio2 = document.getElementById("audio-2");
var div = document.createElement('div');
var div2 = document.createElement('div');
var body = document.body;

button.addEventListener("click", function() {
  audio.play();
});

audio.addEventListener("ended", (event) => {
  div.innerHTML = "<h1>First div</h1><button type='button' id='button-2'>Play Audio 2</button>";
  div.classList.add('fullscreen');
  body.appendChild(div);
});

var button2 = document.getElementById("button-2");

button2.addEventListener("click", function() {
  audio2.play();
});

audio2.addEventListener("ended", (event) => {
  div2.innerHTML = "<h1>Second div</h1><button id='button-3'>Play Audio 3</button>";
  div2.classList.add('fullscreen');
  body.appendChild(div2);
});

body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.fullscreen {
  width: 100%;
  height: 100%;
  background: darkcyan;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: absolute;

<h1>Empty body</h1>
<button type="button" id="button-1">Play Audio</button>
<audio id="audio-1">
        <source src='https://dl.dropboxusercontent.com/s/q6b67dau1g01z3h/click_button_short.mp3' type='audio/mpeg'/>
    </audio>
<audio id="audio-2">
        <source src='https://dl.dropboxusercontent.com/s/q6b67dau1g01z3h/click_button_short.mp3' type='audio/mpeg'/>
    </audio>

Answer 1

You need get the second button after the first audio ends and the second button is appended to body. So the following code should be placed inside the first audio "ended" event.

var button2 = document.getElementById("button-2");
button2.addEventListener("click", function() {
  audio2.play();
}

Here is the result:

var button = document.getElementById("button-1");
var audio = document.getElementById("audio-1");
var audio2 = document.getElementById("audio-2");
var div = document.createElement('div');
var div2 = document.createElement('div');
var body = document.body;

button.addEventListener("click", function() {
  audio.play();
});

audio.addEventListener("ended", (event) => {
  div.innerHTML = "<h1>First div</h1><button type='button' id='button-2'>Play Audio 2</button>";
  div.classList.add('fullscreen');
  body.appendChild(div);
  var button2 = document.getElementById("button-2");

  button2.addEventListener("click", function() {
    audio2.play();
  });
});



audio2.addEventListener("ended", (event) => {
  div2.innerHTML = "<h1>Second div</h1><button id='button-3'>Play Audio 3</button>";
  div2.classList.add('fullscreen');
  body.appendChild(div2);
});

  body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.fullscreen {
  width: 100%;
  height: 100%;
  background: darkcyan;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;

<h1>Empty body</h1>
<button type="button" id="button-1">Play Audio</button>
<audio id="audio-1">
        <source src='https://dl.dropboxusercontent.com/s/q6b67dau1g01z3h/click_button_short.mp3' type='audio/mpeg'/>
    </audio>
<audio id="audio-2">
        <source src='https://dl.dropboxusercontent.com/s/q6b67dau1g01z3h/click_button_short.mp3' type='audio/mpeg'/>
    </audio>