JQuery autocomplete shows empty ul list

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div id="divType1" class="draggable ui-widget-content common-drag">Test Type 1</div>
<div id="divType2" class="draggable ui-widget-content common-drag">Test Type 2</div>
<button id="btnType1">Clone Type 1</button>
<button id="btnType2">Clone Type 2</button>

JavaScript

var globalCount = 1;
var sPositions = localStorage.positions || "{}",
    positions = JSON.parse(sPositions);
$.each(positions, function (id, pos) {
    console.log(id);
    if (id.indexOf("_") > 0) { // to check if not parent
        var findParent = id.substring(0, id.indexOf("_"))
        var cloned = $("#" + findParent).clone();
        cloned[0].id = id;
        cloned.appendTo("body")
        globalCount++;
    }
    $("#" + id).css(pos)
});
$(".common-drag").draggable({
    containment: "#containment-wrapper",
    scroll: false,
    stop: function (event, ui) {
        positions[this.id] = ui.position
        localStorage.positions = JSON.stringify(positions)
    }
});

$("button").click(function () {
    var id = this.id.replace("btn","div"); 
    var cloned = $("#" + id).clone();
    cloned[0].id = id + "_" + globalCount++;
    cloned.insertAfter("body").draggable({
        containment: "#containment-wrapper",
        scroll: false,
        stop: function (event, ui) {
            positions[this.id] = ui.position
            localStorage.positions = JSON.stringify(positions)
        }
    });
});