我怎样才能使这个动态输入字段下降，而不是在别人的中间

Question

我已经创建了输入字段，但是当我点击前两个，它做得很好，直到当我请求第三个来自前两个和还有其他的也可以。可以请一些帮助我。 这里是我的javascript代码：

$(document).ready(function() { 
 
    // it to after "after-add-more" div class. 
 
    $(".add-more").click(function() { 
 
    var html = $(".copy-fields").html(); 
 
    $(".after-add-more").after(html); 
 
    }); 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="panel-body"> 
 
    <div class="input-group control-groups after-add-more-inputs"> 
 
    <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
    <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
    <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
    </div> 
 
    <br /> 
 
    <div class="add-more-inputs"> 
 
    <a href="#">Add</a> 
 
    </div> 
 
    <!-- Copy Fields --> 
 
    <div class="copy-field hide"> 
 
    <div class="control-groups input-group" style="margin-top:10px"> 
 
     <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
     <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
     <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
     <div class="remove"> 
 
     <a href="#"> Remove</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

$(document).ready(function() { 
 
    // it to after "after-add-more" div class. 
 
    $(".add-more-inputs a").click(function() { 
 
    var html = $(".copy-field").html(); 
 
    
 
    $(this).after(html); 
 
    }); 
 

 
    $("body").on("click", ".remove", function() { 
 

 
    $(this).parent().remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="panel-body"> 
 
    <div class="input-group control-groups after-add-more-inputs"> 
 
    <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
    <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
    <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
    </div> 
 
    <br /> 
 
    <div class="add-more-inputs"> 
 
    <a href="#">Add</a> 
 
    </div> 
 
    <!-- Copy Fields --> 
 
    <div class="copy-field hide"> 
 
    <div class="control-groups input-group" style="margin-top:10px"> 
 
     <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
     <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
     <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
     <div class="remove"> 
 
     <a href="#"> Remove</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

希望这有助于！

Answer 2

在这里，你去了一个解决方案第二元素位置后https://jsfiddle.net/tfx6grxn/1/

$(".add-more-inputs a").click(function() { 
 
    $('.copy-field').before($(".copy-field").html()); 
 
}); 
 

 
$("body").on("click", ".remove a", function() { 
 
    $(this).closest(".control-groups").remove(); 
 
});

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-body"> 
 
    <div class="input-group control-groups after-add-more-inputs"> 
 
    <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
    <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
    <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
    </div> 
 
    <br /> 
 
    <div class="add-more-inputs"> 
 
    <a href="#">Add</a> 
 
    </div> 
 
    <!-- Copy Fields --> 
 
    <div class="copy-field hide"> 
 
    <div class="control-groups input-group" style="margin-top:10px"> 
 
     <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
     <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
     <input type="text" name="addmore[]" class="form-control" style="width:30%;"> 
 
     <div class="remove"> 
 
     <a href="#"> Remove</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

第三插件会发生。

使用jQuerybefore方法，在.copy-field。它会在之前插入新的元素.copy-field。

希望这会帮助你。