Add element at specific position relative to click

Question

I have the following setup. I need to click on a nested element and clone the parent element right after the relative div.

For example:

<div class="container">
   <div class="item class1">
        <button class="nested"></button>
   </div>
   <div class="item class2">
        <button class="nested"></button> //Click on this
   </div>
   <div class="item class3">
        <button class="nested"></button>
   </div>
   <div class="item class4">
        <button class="nested"></button>
   </div>
</div>

This is the result I would like:

<div class="container">
   <div class="item class1">
        <button class="nested"></button>
   </div>
   <div class="item class2">
        <button class="nested"></button>
   </div>
   <div class="item class2"> // This is the resulting element at this specific position.
        <button class="nested"></button>
   </div>
   <div class="item class3">
        <button class="nested"></button>
   </div>
   <div class="item class4">
        <button class="nested"></button>
   </div>
</div>

Answer 1

Get the closest .item, clone it and isert it after itself

$('.nested').on('click', function() {
    var item  = $(this).closest('.item'),
        clone = item.clone();

    item.after(clone);
});

Note that for this to work, you have to actually close your elements.

FIDDLE