Cloned divs are not staying in the grid correctly

问题

So I have a button on the left and a form on the right. If you click the button on the left you can create up to 6 forms. If i create these forms in html manually everything displays correctly. However since I am cloning them, they seem to be acting weird.

For example on about the 4th clone the button gets pushed down instead of staying at the top left.

Also each time the section is cloned i update the number of which form that is. But how do i make them stay inside the grid and how do i make them stay in ascending order depending on the number displayed?

Thanks!

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);

回答1:

I added id="formy" to the form and then used $("#formy").append(new_clone) to add the clones. This seems to keep your button in the upper left and keep the clones in order.

<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>

来源：https://stackoverflow.com/questions/37663974/cloned-divs-are-not-staying-in-the-grid-correctly

标签

javascript

jquery

grid

clone