Animated graphic for decision questions

I want to create an animated graphic to show decision questions,

Here is a short explanation how the graphic should look like.

1. first you see a button with the caption " How are you ?"
2. you click on it
3. the button is no longer visible, AND
4. two buttons are displayed. one with the caption " I'm fine " and one with the caption " I'm NOT fine ".
5. depending on which button you click, again two new buttons with two labels are displayed

This should be displayed as a map<question , answer>, where the question is one string, and the answer has two strings.

here is the code which I wrote and that works only for the first case. So how can I change the code now so that it works for all cases?

that mean, no matter on which question you press, it should be displayed the corresponding answers

let counter = 1;
let id = "Q" + counter
const map1 = new Map();

map1.set('how are you?', ["fine", "Not fine"]);
map1.set('fine', ["nice weather", "nice people"]);
map1.set('Not fine', ["bad weather", "bad people"]);

let keys = map1.getKeys();

function show() {
  const button1 = document.createElement('button')
  button1.innerText = map1.get('how are you?')[0];

  const button2 = document.createElement('button')
  button2.innerText = map1.get('how are you?')[1];

  document.getElementById('how are you?')
          .setAttribute("type", "hidden");

  document.body.appendChild(button1)
  document.body.appendChild(button2)

}

<div id="box">
  <input type="button" value="how are you?" id="how are you?" onclick="show()" />
</div>

I hope there is someone here who can help me :) best regards,