title: JQuery-UI draggable elements appear on top of others when they are dropped
body: <p>I'm using JQuery-UI to be able to drag items from one div to another, but when I drop the element in another div, it appears on top of other dropped elements. What am I doing wrong?</p>
  
  <pre><code>        //These are my draggable elements
          $('#interface li').draggable({
              helper: 'clone',
              revert: 'invalid'
          });
  
          //This function makes dropped elements draggable again.
          function foo(){
              $('.foo').each(function() {
                  $(this).draggable({
                      containment: $(this).parent(),
                      stack: '.foo'
                  });
              });
          }
  
          //This function forms table around dropped item
          var fooCount = $('.foo').length;
          $('#mainDiv').droppable({
              drop: function(event, ui) {
                  if (!ui.draggable.hasClass('foo')) {
                      var Class = ui.draggable.attr("class");
                      var title = ui.draggable.text().trim();
                      var item = $('&lt;table class="foo elementTable ' + Class + '" name="' + title + '" id="'+(fooCount+1)+'"&gt;&lt;tr class="tableHeader"&gt;&lt;th class="thClass"&gt;&lt;button class="settings"&gt;set&lt;/button&gt;' + title + '&lt;span class="close"&gt;x&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class="add"&gt;&lt;span class="addList"&gt;Add new link&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;');
                      $(this).append(item);
                      fooCount += 1;
                      foo();
                  }
              }
          });
  </code></pre>
  
  <p>This is my CSS code for styling newly created tables:</p>
  
  <pre><code>.foo {
      min-width: 250px;
      max-width: 300px;
      text-align: center;
      min-height: 50px;
      border: 1px solid white;
      border-radius: 10px;
      position: absolute;
      padding: 0;
  }
  </code></pre>
  
  <p>But the dropped elements appear like this:</p>
  
  <p><a href="https://i.stack.imgur.com/TXnT3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TXnT3.png" alt="enter image description here"></a></p>
  
  <p>I want them to appear like this:</p>
  
  <p><a href="https://i.stack.imgur.com/WFO2I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WFO2I.png" alt="enter image description here"></a></p>
  
  <p>EDIT: Here is a working jsfiffle: <a href="https://jsfiddle.net/vaxobasilidze/79kd1uLL/" rel="nofollow noreferrer">https://jsfiddle.net/vaxobasilidze/79kd1uLL/</a></p>