Добавьте кнопку «Добавить еще», добавив новый элемент инструмента, чтобы поместить его обратно в конец списка.
тоящее время у меня есть кнопка «Добавить еще», которая при нажатии дублирует мой div. В настоящее время проблема заключается в том, что при нажатии кнопки и дублировании элемента div он отображается под кнопкой «Добавить еще». Я хочу, чтобы при нажатии элемент div дублировался прямо под исходным элементом div, это также означает, что дубликат будет находиться над кнопкой «Добавить еще». Как мне это сделать?
HTML
<!-- Instrument Exp. -->
<div>
<label>What instruments and level do you want to teach?</label>
<div class="form-inline justify-content-center" id="ins_1">
<!-- Instrument 1 -->
<div>
<select class="form-control ins">
<option>Instrument</option>
<option>Cello</option>
<option>Clarinet</option>
<option>Drums</option>
<option>Flute</option>
<option>Guitar</option>
<option>Piano</option>
<option>Saxophone</option>
<option>Violin</option>
<option>Vocal</option>
<option>Trumpet</option>
</select>
</div>
<!-- Level 1 -->
<div>
<select class="form-control lvl">
<option>Level</option>
<option>Beginner</option>
<option>Advanced</option>
<option>Intermediate</option>
</select>
</div>
</div>
<!-- Add More -->
<div class="text-center" id="add_more">
<button type="button" class="no_link" onclick="add_instrument()">Add more +</button>
</div>
</div>
JavaScript
var i = 0;
var original = document.getElementById('ins_1');
function add_instrument() {
var clone = original.cloneNode(true);
clone.id = "ins_1" + ++i;
original.parentNode.appendChild(clone);
}