Добавьте кнопку «Добавить еще», добавив новый элемент инструмента, чтобы поместить его обратно в конец списка.

тоящее время у меня есть кнопка «Добавить еще», которая при нажатии дублирует мой 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);
}

Ответы на вопрос(1)

Ваш ответ на вопрос