Javascript jQuery追加不考虑div的CSS

我试图在单击“添加项目”按钮时将项目添加到主div，这应该（每次）向主内容添加新行（文本输入）。这个很好用

问题是文本输入有一些css（一些宽度和高度…），在使用jQuery添加它时没有加载css，因此add可以正常工作，但它显示的是“正常”未设置样式的文本输入，而不是我的（已设置样式）

这是我的HTML

                            <fieldset class="lodging-info-fieldset" id="all_field">
                            <legend>Gage sur &eacutequipement projet</legend>                               

                            <div class="panel-heading score_pannel">
                            <ul class="panel-heading-fieldset">
                                <li>D&eacutesignation</li>
                                <li>Valeur</li>
                            </ul>
                        </div>
                        <div class="form-group" id="extended">
                            <div class="col50 left  ">
                                <input type="text" class="form-control" id="designation"
                                    placeholder="">
                            </div>
                            <div class="col50 left  ">
                                <input type="text" class="form-control" id="valeur"
                                    placeholder="">
                            </div>
                        </div>


                                <div class="form-group">
                                    <div class="add_plus">
                                    <a id="add_pluss"  class='add_plus'>add item </a>
                                    </div>

                                </div>  

                </fieldset>

量规表面和每个设备项目

Désignation
瓦勒尔

添加项

和我的jQuery附加函数：

addLigne : function(event) {
                            $("#all_field")
                            .append(
                                '<div class="form-group">'
                              + '<div class="col50 left">'
                              + '<input type="text" class="form-control" id="designation">'
                              + '</div></div>');

            },

addLigne:函数（事件）{
$（“所有字段”）
.附加(
''
+ ''
+ ''
+ '');
},

有什么想法吗

---

非常感谢你的帮助

我不知道你是如何设计它的（我们需要查看你的CSS代码），但是你复制和复制同一个ID元素，这不是一个好的做法，因为你不能用正确的代码访问这个元素（可能是用cruft，但不是干净和正确的）。 请考虑一下，并尝试使用唯一的字符串更改ID，例如数字

addLigne : function(event) {
    $("#all_field")
        .append(
              '<div class="form-group">'
            + '<div class="col50 left">'
            + '<input type="text" class="form-control" id="designation_'+ ($('input[id^="designation_"]).length + 1) +'">'
            + '</div></div>');

},

addLigne:函数（事件）{
$（“所有字段”）
.附加(
''
+ ''
+ ''
+ '');
},

当您向我们展示您的CSS时，我们可以帮助您解决真正的问题

祝你好运