Клонированные divs не находятся в правильной сетке

Question

Итак, у меня есть кнопка слева и форма справа. Если вы нажмете кнопку слева, вы можете создать до 6 форм. Если я создам эти формы в html вручную, все отображается правильно. Однако, поскольку я клонирую их, они кажутся странными.

Например, около 4-го клона кнопка остается нажатой, а не остается в левом верхнем углу.

Также каждый раз, когда раздел клонирован, я обновляю номер формы. Но как заставить их оставаться внутри сетки и как заставить их оставаться в порядке возрастания в зависимости от числа отображаемых?

Спасибо!

JS FIDDLE

var cloneIndex = 1; 
var clones_limit = 5; 
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div 

function clone() 
{ 
    if(cloned_nbr<clones_limit) 
    { 
    cloneIndex++; 
    cloned_nbr++; 

    var new_clone = $(".clonedInput").first().clone(); 

    new_clone.attr("id", "clonedInput" + cloneIndex); 
    new_clone.find(".label-nbr").text(cloneIndex); 
    new_clone.find(".category").attr("id","category"+cloneIndex); 
    new_clone.show(".remove").attr("id","remove"+cloneIndex); 
    new_clone.on('click', 'button.clone', clone); 
    new_clone.on('click', 'button.remove', remove); 

    $(".clone").before(new_clone); 
    } 
} 
function remove(){ 
    if(cloneIndex>1){ 
    $(this).parents(".clonedInput").remove(); 
    cloned_nbr--; 
    } 
} 
$(".clone").on("click", clone); 

$(".remove").on("click", remove); 

Answer 1

Я добавил id="formy" к форме, а затем использовали $("#formy").append(new_clone) для добавления клонов. Кажется, что ваша кнопка находится в верхнем левом углу и держит клоны в порядке.

<form id="formy" onsubmit="return false" style="background:transparent; border-color:transparent;"> 

<div id="duplicater0" class="clone flavNameDescBox addnewflavorimg col-4" style="display:inline-block;"> 
    ADD ANOTHER FLAVOR PROFILE 
    </div> 

    <div id="clonedInput" class="clonedInput flavNameDescBox col-4" style="display:inline-block; clear:left;"> 
    <h3>Create Flavor</h3> 
    <h4>Flavor profile <span class="label-nbr">1</span></h4> 

    <fieldset> 
     <input class="category" id="category1" placeholder="Your Web Site (optional)" type="url" tabindex="4" required> 
    </fieldset> 
    <fieldset> 
     <textarea placeholder="Type your message here...." tabindex="5" required></textarea> 
    </fieldset> 
    <fieldset> 
     <textarea class="textarea2" placeholder="Type your message here...." tabindex="5" required></textarea> 
    </fieldset> 

    <button class="remove">Remove</button> 
    </div> 
</form> 

<script> 

var cloneIndex = 1; 
var clones_limit = 5; 
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div 

function clone() 
{ 
    if(cloned_nbr<clones_limit) 
    { 
    cloneIndex++; 
    cloned_nbr++; 

    var new_clone = $(".clonedInput").first().clone(); 

    new_clone.attr("id", "clonedInput" + cloneIndex); 
    new_clone.find(".label-nbr").text(cloneIndex); 
    new_clone.find(".category").attr("id","category"+cloneIndex); 
    new_clone.show(".remove").attr("id","remove"+cloneIndex); 
    new_clone.on('click', 'button.clone', clone); 
    new_clone.on('click', 'button.remove', remove); 

    $("#formy").append(new_clone); 
    } 
} 
function remove(){ 
    if(cloneIndex>1){ 
    $(this).parents(".clonedInput").remove(); 
    cloned_nbr--; 
    } 
} 
$(".clone").on("click", clone); 

$(".remove").on("click", remove); 

</script>