Bootstrap form dynamically add remove form with fields

I've done something like you are talking about with Kendo. Basically, you need a template and add/remove item capability. Using any templating capability, you can define a template, and dynamically generate the template based on a JSON object, and add it to the DOM tree, or remove an existing item from the DOM tree with jQuery.

A template is a great option and probably the way you should go. However, if you want to avoid adding a templating engine, you can do it with jQuery, or even just vanilla JS.

Here is simple JQuery example:

  $(function () {
    function createGroup(name) {
        var label = document.createElement("label");
        $label = $(label);
        $label.attr("for", name)
            .text(name);

        var input = document.createElement("input");
        $input = $(input);
        $input.addClass("form-control")
            .attr("type", "text")
            .attr("name", name);

        var group = document.createElement("div");
        $group = $(group);
        $group.addClass("form-group")
            .append(label, input);

        return group;
    }

    $("#plusButton").click(
        function () {
            var newHorizontalForm = document.createElement("div");
            $(newHorizontalForm).append(createGroup("New Input"),
                    createGroup("New Input"),
                    createGroup("New Input"))
                .addClass("form-horizontal");
                $("#form").append(newHorizontalForm);
    });


     $("#minusButton").click(
            this.parent.remove();
        });

});