Q:

dynamically created elements in jquery sortable

My Code is like this :
$(function  () {
      $("ol.mauDIDROP").sortable({
    group: '.example'
  });
    $("ol.areaDROP").sortable({
    group:  '.example',
    drop: false,
    drag: false,
  });
   $("ol.areaDROP>li>ol").sortable({
      group:  '.example',
      drop: true,

  });
});

Demo & complete code : https://jsfiddle.net/oscar11/15qvta6p/6/
Drag & drop is working
But if :
<li>Single Room<ol></ol></li>
      <li>Double Room<ol></ol></li>
      <li>Family Room<ol></ol></li>

I move to javascript to use append like this : https://jsfiddle.net/oscar11/kdf7xngk/1/
Drag & drop is not working
Any suggestions on how I can solve this problem?
Thank you 

A:

change your script to:
 $(function() {
   $("ol.areaDROP").append("<li>Single Room<ol></ol></li><li>Double Room<ol></ol></li><li>Family Room<ol></ol></li>");
   $("ol.mauDIDROP").sortable({
     group: '.example'
   });
   $("ol.areaDROP").sortable({
     group: '.example',
     drop: false,
     drag: false,
   });
   $("ol.areaDROP>li>ol").sortable({
     group: '.example',
     drop: true,

   });
 });

