Javascript-форум - Как вывести по очередно сгенерированные кнопки?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как вывести по очередно сгенерированные кнопки? (https://javascript.ru/forum/dom-window/69154-kak-vyvesti-po-ocheredno-sgenerirovannye-knopki.html)

Как вывести по очередно сгенерированные кнопки?

У меня есть функция для генерации кнопок из списка mylist. Мне нужно из этого списка получить первые два елемента (кнопки), потом после нажатия мышкой на одну из этих кнопок на их место появлялись следующие два елемента (кнопки) и так далее пока в списке mylist не закончатся элементы.
Я смог реализовать только это, что просто генерит кнопки из моего списка.

<div id="test"></div>

function genButtons(a) {
    for (var x = 0; x < a.length; x++) {
      var btn = document.createElement('input')
      btn.id = 'b' + x;
      btn.value = a[x];
      btn.type = 'button';
      document.getElementById('test').appendChild(btn)

      btn.addEventListener('click', function() {
        // genButtons(mylist)
      })
    }
  }

  var mylist = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten']
 genButtons(mylist)

mikefromru,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>


</head>

<body>
<div id="test"></div>
<script>
window.addEventListener("DOMContentLoaded", function() {
         var x = 0;
    function genButtons(a) {
        var parent = document.getElementById("test"),
            inp = parent.querySelectorAll("[id^='b']");
        [].forEach.call(inp, function(btn) {
            parent.removeChild(btn)
        });
        a.slice(0, 2).forEach(function(str) {
            var btn = document.createElement("input");
            btn.id = "b" + x++;
            btn.value = str;
            btn.type = "button";
            parent.appendChild(btn);
            btn.addEventListener("click", function() {
                genButtons(a.slice(2))
            })
        })
    }
    var mylist = ["one", "two", "three", "four", "five", "six", "seven", "eight",
        "nine", "ten"
    ];
    genButtons(mylist)
});
  </script>
</body>
</html>