jQuery və Bootstrap ilə dinamik olaraq inputlar əlavə edib silmək

1.html faylda

<div class="input-group control-group after-add-more">
    <input type="text" name="olcu[]" id="olcu" class="form-control" placeholder="Ölçü əlavə et">
    <div class="input-group-btn">
        <button class="btn btn-success add-more" type="button">+</button>
    </div>
    <small class="form-hint text-danger"></small>
</div>

2.js faylda

<script type="text/javascript">

    $(document).ready(function() {

        var element = '<div class="input-group control-group"  style="margin-top:10px"><input type="text" name="olcu[]" id="olcu" class="form-control" placeholder="Ölçü əlavə et"><div class="input-group-btn"><button class="btn btn-danger remove" type="button">X</button></div><small class="form-hint text-danger"></small></div>';
        $(".add-more").click(function(){
            $(".after-add-more").after(element);
        });

        $("body").on("click",".remove",function(){
            $(this).parents(".control-group").remove();
        });

    });

</script>