Jquery Repeater, how to make the 'create button' at the bottom?

Question

I understand that the data-repeater-create="" must be inside the id="left_repeater" , otherwise it will not function as a create button. Is there a way that the button will function outside the id="left_repeater" or id="right_repeater" ?

My goal is when I click add left button, it will only create the left input and vise versa for the add right button. Both of the button is at the very bottom.

JS fiddle link to see the codes

 $('#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

Place the #left_repeater inside div container.

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

add CSS style to this

.container {
  display: flex;
}

https://jsfiddle.net/y1bpot5n//