Why only last nested element is visible - javascript using appendChild()?

Viewed 30

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++;
        }

Only Input field is visible but not buttons. enter image description here

0 Answers
Related