Actualmente tengo un formulario donde, al dar a un botón + (generado dinámicamente también), agrego un input con name plus_p, plus_t o plus_b al div padre, dependiendo de a qué botón haya hecho clic (cada botón está en un div.sortable diferente):
addInpt(e){
var tag = e.target;
var sib = tag.parentNode;
console.log(sib);
if (sib == document.querySelector(".sortable_p")){
console.log("P");
var input = document.createElement("input");
input.type = "text";
input.name = "plus_p";
sib.appendChild(input);
} else if (sib == document.querySelector(".sortable_t")){
console.log("T");
var input = document.createElement("input");
input.type = "text";
input.name = "plus_t";
sib.appendChild(input);
} else if (sib == document.querySelector(".sortable_b")){
console.log("B");
var input = document.createElement("input");
input.type = "text";
input.name = "plus_b";
sib.appendChild(input);
}
}
El problema viene cuando, al añadir OTRO campo, el botón correspondiente a generar un cuarto input dentro de ese campo, no funciona correctamente, es decir, consigue escribir por consola el div padre, que en este caso, sería sortable_p, pero no ejecuta correctamente el appendChild():
¿Cómo puedo hacer que añada inputs dinámicamente con y cada uno de los botones?
(Aquí dejo la template que uso para generar dinámicamente los sortable_p,t y b)
<template id="temp-power">
<div class="box-power">
<label class="lbl-tmp-crd" contenteditable='true' data-name="labe_power">POWER</label>
<div class="sortable_p" draggable="true">
<input type="text" name="t_power"/>
<input type="text" name="v_power"/>
<input type="text" name="p_power">
<button type="button" class="btn-event-addInpt" title="Añadir">+</button>
<button type="button" class="btn-event-disAble powr" title="Deshabilitar">X</button>
<button type="button" class="btn-event-erase" title="Borrar">-</button>
<div class="draggl">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</template>