Хочу сделать чтобы при нажатии на кнопку создавался точно такой же select под тем что есть. Как сделать не пойму?

Question

[holllop]

Есть ячейка в ней select и button

<td>
        <select class="added" id="select5">
        </select>
        <button class="add">+</button>
</td>

мои попытки

function onAddButtonClick() {
  const td = this.parentNode;
  const selectElement = td.querySelector('select');
  
  const newSelect = createSelect();
  
  const newRow = document.createElement('tr');
  const newCell = document.createElement('td');
  
  newCell.appendChild(newSelect);
  newRow.appendChild(newCell);
  
  td.parentNode.after(newRow);
}

оно просто добавило новую строку в таблицу

function onAddButtonClick() {
  const td = this.parentNode;
  const selectElement = td.querySelector('select');

  const newSelect = createSelect();
  
  td.appendChild(newSelect);
}

это просто добавляло селекты после кнопки с право

function onAddButtonClick() {
  const td = this.parentNode;
  const selectElement = td.querySelector('select');

  const newSelect = createSelect();

  const newTd = document.createElement('td');
  newTd.appendChild(newSelect);

  const tr = td.parentNode;
  tr.appendChild(newTd);
}

а это добавляет столбец в конце таблицы.
А я хочу чтобы select который добавляется был под тем, что есть. Как книга на книге типа.

Comments

[Максим]

https://codepen.io/topicstarter/pen/RwEYMJo типа такого ?

[holllop]

Максим, ну не совсем тут в вашем примере следующий select появляется с права от предыдущего. Это не совсем, то чего я хочу. Я хочу что бы новый select как бы, был с нового абзаца (то есть под предыдущим).

[Максим]

holllop, тогда не знаю как, там же обработать те которые появились тож надо же ?

Answer 1

[sergski]

Что-то много всего понаписали.) Выбрать select, скопировать cloneNode, вставить последним. И все это по клику на button
Например, так

Comments

[holllop]

хорошее решение, я бы наверное не додумался