添加动态Bootstrap HTML元素

Question

1. 使用动态添加的HTML元素进行CSS对齐问题。
2. 我如何才能获得新添加的元素的ID？

JS档案

$(document).ready(function () {
    $("#add").click(function (e) {
        $("#items").append('
                <div class="row form-group">
                    <div class="col-sm-3">
                        <input type="text" name="input[]" placeholder="something something" class="form-control input-sm text">
                    </div>
                    <div class="col-sm-1">
            <button type="button" class="btn btn-default delete">
               <i class="glyphicon glyphicon-remove"></i>
            </button>
                    </div>
                </div>');
    });
    $("body").on("click", ".delete", function (e) {
        $(this).parent("div").parent("div").remove();
    });
});

HTML文件

<div class="row form-group">
    <div id="items">
        <div class="col-sm-3">
            <input type="text" name="input[]" placeholder="something Else here" class="form-control input-sm text">
        </div>
    </div>
</div>
<div class="row form-group">
    <div class="col-sm-4">
        <div class="btn btn-success" id="add">Add new fields</div>
    </div>
</div>

按“添加字段”按钮2次后，我的页面出现