Clone element and append and remove?

Question

Is there a easy way to clone entire .box element on click button-add , and append it after Also i need button-remove to delete only that box?

HTML

    <input class="button-add" type="button" value="Clone box">

 <div class="form-group box">
    <div class="col-lg-7">
        <p>Article</p>
        <select class="form-control" name="article()">
            <option value="">Smoki Coko Kokos</option>
            <option value="8">Koka Kola</option>
            <option value="10">Cipiripi</option>
        </select>
    </div>
    <div class="col-lg-3">
        <p>Quantity</p>
        <input class="form-control" value="3" name="qty()" type="text">
    </div>
    <div class="col-lg-2">
        <input class="button-remove" type="button" value="Delete box">
    </div>
    </div>

this is what i have for now but does not work,

JQUERY

$(document).ready(function() {

    $('.button-add').click(function(){

        //we select the box clone it and insert it after the box
        $('.box').clone().insertAfter(".box");
    });
    });

Answer 1

$('.box').clone() will clone every element with class box on the page. You should specify which box you want to clone, and also that you want to append it after the last box:

$('.box:first').clone().insertAfter(".box:last");

Furthermore you can use event delegation to implement the remove buttons:

$(document).on("click", ".button-remove", function() {
    $(this).closest(".box").remove();
});

A fiddle with these changes is here: http://jsfiddle.net/nbpyyuwu/

However, this fiddle will probably not do what you want since if you remove all the boxes it will no longer work. I would suggest creating a hidden template that you clone and append instead (see fiddle: http://jsfiddle.net/nbpyyuwu/1/)