为什么当我追加子项时我的输入值会被清除？

var controls = [{value: "flechas", text: "Flechas de movimiento"}, {value: "letras", text: "Letras (WASD)"}, {value: "enter", text: "Enter"}, {value: "control", text: "Ctrl"}, {value: "alt", text: "Alt"}, {value: "espacio", text: "Espacio"}, {value: "der", text: "Click derecho"}, {value: "izq", text: "Click izquierdo"}, {value: "mover", text: "Mover el ratón"}, {value: "shift", text: "Shift"}, {value: "customkey", text: "Especificar tecla"}],
	skippedIndexes = [],
	sep = "<div class='sep' id='firstsep' style='width: 200px;'></div>",
	oldIndex = 0;//,
	//sInd = 0;

function addControl(e) 
{

	if(e.lastChild.className != "sep") e.innerHTML += sep;
	e.appendChild(getControlSelect());
	e.innerHTML += sep.replace(" id='firstsep'", "");
}

function onSelectChange(e) 
{
	//Modify the array
	//a = e.associatedInput

	//console.log(e.dataset.i);

	/*var newIndex;

	newIndex = e.selectedIndex;

	if(skippedIndexes.length > 0 && skippedIndexes.indexOf(oldIndex) > -1) skippedIndexes.splice(skippedIndexes.indexOf(oldIndex), 1); //Delete oldIndex

	if(skippedIndexes.length > 0 && skippedIndexes.indexOf(newIndex) == -1) skippedIndexes.push(newIndex);

	oldIndex = newIndex;*/

	//Change associated



}

function deleteFirstSep() 
{
	if(!document.getElementById("firstsep").nextSibling) document.getElementById("firstsep").remove();
}

function getControlSelect() 
{
	var select = document.createElement('select'),
	    option,
	    i = 0,
	    il = controls.length,
	    html = document.createElement('div'),
	    text = document.createElement('input'),
	    delbtn = document.createElement('input'),
	    ascinpt = document.createElement('input'),
	    html1 = document.createElement('div');

	html1.style.display = "inline-block";

	text.type = "text";
	text.name = "accion[]";
	text.style.width = "158px";

	delbtn.type = "button";
	delbtn.setAttribute('onclick', 'var e = this.parentNode;e.nextSibling.remove();e.remove();deleteFirstSep();');
	delbtn.value = "-";
	delbtn.style.padding = "0 5px";
	delbtn.style.marginLeft = "5px";
	delbtn.style.position = "relative";
	delbtn.style.top = "-20px";
	delbtn.style.left = "2px";

	ascinpt.name = "tecla[]";
	ascinpt.type = "hidden";

	select.id = "htmlkey";
	select.dataset.associatedInput = ascinpt;
	//select.dataset.i = sInd;
	//sInd++;
	select.setAttribute("onchange", "onSelectChange(this)");

	for (; i < il; ++i)
		if(skippedIndexes.indexOf(i) == -1) 
		{
		    option = document.createElement('option');
		    option.setAttribute('value', controls[i].value);
		    option.appendChild(document.createTextNode(controls[i].text));
		    select.appendChild(option);
		}
	html1.innerHTML += "<b>Tecla</b><br>";
	html1.appendChild(select);
	html1.innerHTML += "<br><b>Acción</b><br>";
	html1.appendChild(text);
	html.appendChild(html1);
	html.appendChild(delbtn);

	return html;
}

.sep {
  border-top: 4px dashed #A4A4A4;
  margin: 15px 0 15px 0;
}

<div>
    <input type="button" value="Añadir tecla" onclick="addControl(this.parentNode)" />
</div>

var controls = [{value: "flechas", text: "Flechas de movimiento"}, {value: "letras", text: "Letras (WASD)"}, {value: "enter", text: "Enter"}, {value: "control", text: "Ctrl"}, {value: "alt", text: "Alt"}, {value: "espacio", text: "Espacio"}, {value: "der", text: "Click derecho"}, {value: "izq", text: "Click izquierdo"}, {value: "mover", text: "Mover el ratón"}, {value: "shift", text: "Shift"}, {value: "customkey", text: "Especificar tecla"}],
  skippedIndexes = [],
  sep = "<div class='sep' id='firstsep' style='width: 200px;'></div>",
  oldIndex = 0; //,
//sInd = 0;

function addControl(e) {

  if (e.lastChild.className != "sep") e.innerHTML += sep;
  e.appendChild(getControlSelect());
  e.insertAdjacentHTML('beforeend', sep.replace(" id='firstsep'", ""));
}

function onSelectChange(e) {}

function deleteFirstSep() {
  if (!document.getElementById("firstsep").nextSibling) document.getElementById("firstsep").remove();
}

function getControlSelect() {
  var select = document.createElement('select'),
    option,
    i = 0,
    il = controls.length,
    html = document.createElement('div'),
    text = document.createElement('input'),
    delbtn = document.createElement('input'),
    ascinpt = document.createElement('input'),
    html1 = document.createElement('div');

  html1.style.display = "inline-block";

  text.type = "text";
  text.name = "accion[]";
  text.style.width = "158px";

  delbtn.type = "button";
  delbtn.setAttribute('onclick', 'var e = this.parentNode;e.nextSibling.remove();e.remove();deleteFirstSep();');
  delbtn.value = "-";
  delbtn.style.padding = "0 5px";
  delbtn.style.marginLeft = "5px";
  delbtn.style.position = "relative";
  delbtn.style.top = "-20px";
  delbtn.style.left = "2px";

  ascinpt.name = "tecla[]";
  ascinpt.type = "hidden";

  select.id = "htmlkey";
  select.dataset.associatedInput = ascinpt;
  //select.dataset.i = sInd;
  //sInd++;
  select.setAttribute("onchange", "onSelectChange(this)");
  for (; i < il; ++i)
    if (skippedIndexes.indexOf(i) == -1) {
      option = document.createElement('option');
      option.setAttribute('value', controls[i].value);
      option.appendChild(document.createTextNode(controls[i].text));
      select.appendChild(option);
    }
  html1.insertAdjacentHTML('beforeend', "<b>Tecla</b><br>");
  html1.appendChild(select);
  html1.insertAdjacentHTML('beforeend', "<br><b>Acción</b><br>");
  html1.appendChild(text);
  html.appendChild(html1);

  html.appendChild(delbtn);
  return html;
}

.sep {
  border-top: 4px dashed #A4A4A4;
  margin: 15px 0 15px 0;
}

<div>
  <input type="button" value="Añadir tecla" onclick="addControl(this.parentNode)" />
</div>