单击并播放音频后，是否有一种有效的方法来显示和删除特定按钮？

Question

我正在建立一个使用Javascript的网站，您可以在该网站上按一个按钮来播放音频文件。音频结束时，它将显示两个新按钮并删除第一个按钮。我正在尝试制作一个交互式音频故事，以便用户在故事的多个位置进行选择。 like this flowchart

我已经尝试制作一个带有ID和onclick()= play()的按钮。 在javascript中，我使用getElementById来进行style.display和style.visibility。

这种类型的作品，但是效率不高，因为我需要制作50多个按钮。

HTML

<a class="btn btn-light" id="introbutton" onclick="playstart()" role="button">start</a>

<audio id="introaudio" src="audio/bel.WAV" ></audio>

JAVASCRIPT

function playstart(){
   var introaudio = document.getElementById("introaudio");
   introaudio.play();
}
introaudio.onended = function() {
   document.getElementById("introbutton").style.display = "none";

   document.getElementById("button2A").style.visibility = "visible";
   document.getElementById("button2B").style.visibility = "visible";
};

我希望有一些解决方案，我可以给我的文件名一个数字和一个A / B名称。例如：audio2A.mp3。然后，当您选择按钮2A时，它将自动选择该文件并显示与该选择有关的两个按钮。