JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="inputEmail">
                Email</label>
            <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email" />
                </div>
        </div>
    </div>
    <input type='button' value='Add Button' id='addButton' />
    <input type='button' value='Remove Button' id='removeButton' />

JavaScript

$(document).ready(function () {

            $("#addButton").click(function () {
                if( ($('.form-horizontal .control-group').length+1) > 2) {
                    alert("Only 2 control-group allowed");
                    return false;
                }
                var id = ($('.form-horizontal .control-group').length + 1).toString();
                $('.form-horizontal').append('<div class="control-group" id="control-group' + id + '"><label class="control-label" for="inputEmail' + id + '">Email' + id + '</label><div class="controls' + id + '"><input type="text" id="inputEmail' + id + '" placeholder="Email"></div></div>');
            });

            $("#removeButton").click(function () {

                $(".form-horizontal .control-group:last").remove();
            });
        });