I am trying dynamically add fields on button click and have several nested elements but only last nested element is visible.
var i = 1;
function add_new_recipient() {
var div_group = document.createElement("div");
div_group.setAttribute("class", "input-group");
var input = document.createElement("INPUT");
input.setAttribute("id", "txt_recipients" + i);
input.setAttribute("Name", "txt_recipients" + i);
input.setAttribute("type", "text");
input.setAttribute("class", "form-control required txt_recipients");
input.setAttribute("runat", "server");
var span = document.createElement("span");
span.setAttribute("class", "input-group-append");
var button_add = document.createElement("button");
button_add.setAttribute("id", "btn_add_new_recipients_field" + i);
button_add.setAttribute("type", "button");
button_add.setAttribute("class", "btn btn-primary btn_add_new_recipients_field fa fa-plus");
button_add.onclick = function () {
add_new_recipient();
}
var button_remove = document.createElement("button");
button_remove.setAttribute("id", "btn_remove_new_recipients_field" + i);
button_remove.setAttribute("type", "button");
button_remove.setAttribute("class", "btn btn-primary btn_remove_new_recipients_field fa fa-minus");
button_remove.onclick = function () {
remove_recipient();
}
span.appendChild(button_add);
span.appendChild(button_remove);
input.appendChild(span);
div_group.append(input);
document.getElementById("new_recipient_input").appendChild(div_group);
i++;
}
