Как я могу добавить div на клик?

Question

Допустим, у меня есть этот div

        <div class="row deliver-to forms">
            <div class="col-4">
                <label>Region</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="region-to" id="region-to">
            </div>
            <div class="col-4">
                <label>District</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="district-to" id="district-to">
            </div>
            <div class="col-4">
                <label>Town</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="town-to" id="town-to">
            </div>
        </div>    

и эта кнопка

<button class="btn btn-primary btn-flat mt-3 offset-10 add_place" type="button" id="add_place">
    <i class="fa fa-plus"></i>
</button>

Как я могу фактически добавить весь этот div после себя, нажав на эту кнопку?

Вся структура моего кода выглядит так:

        <div class="row deliver-to forms">
            <div class="col-4">
                <label>Region</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="region-to" id="region-to">
            </div>
            <div class="col-4">
                <label>District</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="district-to" id="district-to">
            </div>
            <div class="col-4">
                <label>Town</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="town-to" id="town-to">
            </div>
        </div>
        <button class="btn btn-primary btn-flat mt-3 offset-10 add_place" type="button"
                id="add_place">
            <i class="fa fa-plus"></i>
        </button>

Answer 1

Шаг 1: попробуйте заключить его в div с указанием c id.

<div id="newrow">
    <div class="row deliver-to forms">
            <div class="col-4">
                <label>Region</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="region-to" id="region-to">
            </div>
            <div class="col-4">
                <label>District</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="district-to" id="district-to">
            </div>
            <div class="col-4">
                <label>Town</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="town-to" id="town-to">
            </div>
        </div>
</div>

Шаг 2: Создайте переменную в jquery и назначьте элемент, который вы хотите добавить. Пример:

var element = "<div> New Div Appending</div>"

Шаг 3: Jquery для добавления в упакованный div.

$("#newrow").append(element)

Answer 2

$("button").click(function(){
        $(".next").append("<div class=\"row deliver-to forms\">\n" +
            "            <div class=\"col-4\">\n" +
            "                <label>Region</label>\n" +
            "                <input class=\"w-50 mt-2 form-control\" type=\"text\" data-id=\"region-to\" id=\"region-to\">\n" +
            "            </div>\n" +
            "            <div class=\"col-4\">\n" +
            "                <label>District</label>\n" +
            "                <input class=\"w-50 mt-2 form-control\" type=\"text\" data-id=\"district-to\" id=\"district-to\">\n" +
            "            </div>\n" +
            "            <div class=\"col-4\">\n" +
            "                <label>Town</label>\n" +
            "                <input class=\"w-50 mt-2 form-control\" type=\"text\" data-id=\"town-to\" id=\"town-to\">\n" +
            "            </div>\n" +
            "        </div>")});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row deliver-to forms">
            <div class="col-4">
                <label>Region</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="region-to" id="region-to">
            </div>
            <div class="col-4">
                <label>District</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="district-to" id="district-to">
            </div>
            <div class="col-4">
                <label>Town</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="town-to" id="town-to">
            </div>
        </div>
        <button class="btn btn-primary btn-flat mt-3 offset-10 add_place" type="button"
                id="add_place">
            <i class="fa fa-plus">click</i>
        </button>
        <div class="next"></div>