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>