javascript - jQuery UI Doesn't accept droppable behaviour on new elements

Question

I made simple script for adding elements in <ul>, those elements are sortable. When I add new element, <li>, the element is sortable, I can drag and drop it on other location, but I can't drop other elements on position of newly created element. I hope you understand me. I tried to apply same settings as on manually added elements but it doesn't work:

$(document).ready(function(){
    $("ul").sortable({
        containment : 'document', 
        tolerance: 'pointer', 
        cursor: 'pointer', 
        revert: 'true', 
        opacity : 0.6, 
        connectWith : "ul", 
        placeholder: 'border', 
        items : 'li:not(.naslov)'
    }).disableSelection();

    $("li").ellipsis();

    $("#addGroup").click(function(){
        $(".kolone").append(
            '<ul class="prvi"><li class="naslov">Naslov1</li><li></li></ul>'
        ).sortable({
            containment : 'document', 
            tolerance: 'pointer', 
            cursor: 'pointer', 
            revert: 'true', 
            opacity : 0.6, 
            connectWith : "ul", 
            placeholder: 'border', 
            items : 'li:not(.naslov)'
        }).disableSelection();
    });
});

Answer 1

I fixed it with changing selector in first line from 'ul' to 'kolone'

$(".kolone").sortable({
    containment: 'document',
    tolerance: 'pointer',
    cursor: 'pointer',
    revert: 'true',
    opacity: 0.6,
    connectWith: "ul",
    placeholder: 'border',
    items: 'li:not(.naslov)'
}).disableSelection();

$("li").ellipsis();

$("#addGroup").click(function () {
    $(".kolone").append('<ul class="prvi"><li class="naslov">Naslov1</li><li></li></ul>').sortable({
        containment: 'document',
        tolerance: 'pointer',
        cursor: 'pointer',
        revert: 'true',
        opacity: 0.6,
        connectWith: "ul",
        placeholder: 'border',
        items: 'li:not(.naslov)'
    }).disableSelection();
});

And kolone stands for columns.