覆盖按钮菜单javascript

Question

我有一个菜单按钮“开始”。当我点击开始时，叠加菜单会下拉两个圆形按钮： 水果和蔬菜

现在，我想点击水果，水果和素食按钮消失，9个不同水果的覆盖层上出现约9个按钮..

我该怎么做？

/* Open when someone clicks on the span element */
function openNav() {
  document.getElementById("myNav").style.height = "100%";

}


/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

<div id="myNav" class="overlay">
  <!-- Button to close the overlay navigation -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

  <!-- Overlay content -->
  <div class="overlay-content">
    <button class="btn btn-circle overlay-icon" onclick='openNavTwo()'>Fruits</button>
    <div id="innerNav" class="overlay">
      <button class="btn btn-circle overlay-icon">Apple</button>
      <button class="btn btn-circle overlay-icon">Apple</button>
    </div>
    <button class="btn btn-circle overlay-icon" onclick=''>Veggies</button>
  </div>
</div>