So I've tried a few things, and not really getting anywhere. After an extensive google search I've decided to seek for help from the masters in SO.

The idea: Duplicate a dropdown and a input field on a button click ( can be any number of times )

The solution: JavaScript click listener that takes a copy of the existing div and makes a new one.

The problem: When cloning the div with the dropdown and the input field the JavaScript code does not change the ID's of the child elements making the dropdown unusable( they can be interacted with but I cannot use the data from them ).

I've made a JSFiddle if anyone would like to play with it.

HTML:

            <div id="row-container">
                <div id="profile-row0">
                    <select id="select-item0" class="selectpicker" data-live-search="true">
                        <option>id</option>
                        <option>email</option>
                        <option>phone</option>
                    </select>
                    <input id="select-item-value0" class="select-item-value" placeholder="Item value"/>
                </div>
            </div>

            <button id="add-button"> GO </button>

JS:

document.getElementById("add-button").addEventListener("click", addItemRow);

var i = 0;

function addItemRow(){
    var original = document.getElementById('profile-row' + i);
    var clone = original.cloneNode(true);
    clone.id = "profile-row" + ++i;
      //clone.firstChild.id = "select-item" + ++i;
      //clone.lastChild.id = "select-item-value" + ++i;
    original.parentNode.appendChild(clone);
}

The last thing I have tried is mented out in the JavaScript code.

So I've tried a few things, and not really getting anywhere. After an extensive google search I've decided to seek for help from the masters in SO.

The idea: Duplicate a dropdown and a input field on a button click ( can be any number of times )

The solution: JavaScript click listener that takes a copy of the existing div and makes a new one.

The problem: When cloning the div with the dropdown and the input field the JavaScript code does not change the ID's of the child elements making the dropdown unusable( they can be interacted with but I cannot use the data from them ).

I've made a JSFiddle if anyone would like to play with it.

HTML:

            <div id="row-container">
                <div id="profile-row0">
                    <select id="select-item0" class="selectpicker" data-live-search="true">
                        <option>id</option>
                        <option>email</option>
                        <option>phone</option>
                    </select>
                    <input id="select-item-value0" class="select-item-value" placeholder="Item value"/>
                </div>
            </div>

            <button id="add-button"> GO </button>

JS:

document.getElementById("add-button").addEventListener("click", addItemRow);

var i = 0;

function addItemRow(){
    var original = document.getElementById('profile-row' + i);
    var clone = original.cloneNode(true);
    clone.id = "profile-row" + ++i;
      //clone.firstChild.id = "select-item" + ++i;
      //clone.lastChild.id = "select-item-value" + ++i;
    original.parentNode.appendChild(clone);
}

The last thing I have tried is mented out in the JavaScript code.

• javascript
• html

3 Answers 3

Your code almost works, but you missed one thing: the first and last elements aren't the ones you are looking for (These are not the droids... sorry, I couldn't help it). The first and the last elements are #text nodes, not HtmlElement ones.

you can modify your code to make it work:

function addItemRow(){
    var original = document.getElementById('profile-row' + i);
    var clone = original.cloneNode(true);
    i++;
    clone.id = "profile-row" + i;
    clone.getElementsByTagName('select')[0].id = "select-item" + i;
    clone.getElementsByTagName('input')[0].id = "select-item-value" + i;
    original.parentNode.appendChild(clone);
}

You can get the newly cloned element using document.getElementById. Then using childNodes it will give an array. There after selecting the array index you can update the id

document.getElementById("add-button").addEventListener("click", addItemRow);

var i = 0;

function addItemRow() {
  var original = document.getElementById('profile-row' + i);
  var clone = original.cloneNode(true);
  var updatedId = "profile-row" + ++i;
  clone.id = updatedId;
  original.parentNode.appendChild(clone);
  var cloneChild = document.getElementById(updatedId).childNodes;
  console.log(cloneChild)
  cloneChild[1].id = "select-item" + (i + 1);
  cloneChild[3].id = "select-item-value" + (i + 1);
}

<div id="row-container">
  <div id="profile-row0">
    <select id="select-item0" class="selectpicker" data-live-search="true">
                        <option>id</option>
                        <option>email</option>
                        <option>phone</option>
                    </select>
    <input id="select-item-value0" class="select-item-value" placeholder="Item value" />
  </div>
</div>

<button id="add-button"> GO </button>

This routine helps me when cloning something by renaming the old ID suffix (e.g. 0 to a new id suffix e.g. 1)

function deepRenameId(element, idSuffix, idNewSuffix) {
    if (element.id) {
        // console.log("deep rename:",element.id)
        element.id = element.id.replace(idSuffix,idNewSuffix)
        // console.log("........ To:",element.id)
    }
    for (let i = 0; i < element.children.length; i++) {
        deepRenameId(element.children[i],idSuffix,idNewSuffix)
    }
}