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

Question

[Mike]

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

<script>
	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)
</script>

Answer 1

[Виктор Л]

Ну думаю с начало нужно немного изменить массив

var mylist = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
var newArray = mylist.map(()=>{
  return  mylist.splice(0,2);
});
console.log(newArray);

Затем сразу вызвать genButtons(newArray[0]) чтобы получить первые две кнопки
в саму функцию генерации кнопок добавить чтобы на кнопки вешалось событие онклик
для генерации след кнопок что типа такого

function nextElement() {
   document.getElementById('test').appendChild(genButtons(newArray[myIndex++%newArray.length]));
};

как то так только тут без удаления

var mylist = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
var myIndex = 0;
var newArray = mylist.map(()=>{
  return  mylist.splice(0,2);
});
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';
      btn.onclick = function() { // Note this is a function     	
        nextElement();
      };  
       document.getElementById('test').appendChild(btn); 
    }    
  }
genButtons(newArray[myIndex]); 
function nextElement() {
  myIndex ++;
	genButtons(newArray[myIndex]);
};