Jquery Repeater，如何使底部的'create button'？

Question

我知道data-repeater-create=""必须在id="left_repeater"内，否则它将无法用作创建按钮。有没有办法让按钮在id="left_repeater"或id="right_repeater"之外起作用？

我的目标是当我单击add left按钮时，它只会创建左侧输入，反之亦add right然。两个按钮都在最底部。

JS小提琴链接以查看代码

$('#left_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
$('#right_repeater').repeater({
show: function() {
$(this).slideDown();
},
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div id="left_repeater">
<div data-repeater-list="left_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="left">
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
<!-- <div data-repeater-create="" class="btn btn-sm btn-success">
	        <span><i class="la la-plus"></i><span>Add</span></span>
	    </div> -->
</div>
<div id="right_repeater">
<div data-repeater-list="right_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="right">
</div>
</div>
</div>
</div>
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div>
</div>
<div class="row">
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Left</span></span>
</div>
</div>
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Right</span></span>
</div>
</div>
</div>

Answer 1

将 #left_repeater 放在div 容器内。

<div class="container">
<div id="left_repeater">
.....
</div>
</div>

为此添加 CSS 样式

.container {
display: flex;
}

https://jsfiddle.net/y1bpot5n//