jQuery stackable not working on dynamically created draggable elements

Question

I'm creating draggable elements on runtime and want to make them stackable. Every time I generate a new draggable element, this code runs:

$('.draggable#Element' + ElementID).draggable({
    containment: "body",
    stack: "#draggables"
});

Draggable Container with two generated elements:

<div id="draggables">
    <div class="draggable" id="Element1"></div>
    <div class="draggable" id="Element2"></div>
</div>

I can drag around every element. The containmant also works.

But: Unfortunately, only the last created element stacks if I drag it around. The other elements keep their z-index and stay in background.

I also tried to run this code everytime a new element is created (same result as the code above):

$('.draggable').each(function() {
    $(this).draggable({
        containment: "body",
        stack: "#draggables"
    });
});

And this one:

$('.draggable').draggable({
    containment: "body",
    stack: "#draggables"
});

How do I achieve that every element stacks correctly?

jsFiddle Example: https://jsfiddle.net/zurgs1zb/

Answer 1

check first comment. and try delete all stack option and declaration stack option run time in after intialization:

$('.draggable').each(function() {
if($(this).draggable( "option", "stack" ) == false) //if not already set
   {
$( $(this) ).draggable( "option", "stack", "#draggables" ); // set stack option
   }

});