jQuery UI sortable refresh doesn't work after appending new element

So once I append a new list of elements they are no longer sortable. I've tried to use sortable("refresh") but it still doesnt work.

$(function() {
    $(".test").on('click', function(event) {
      $(this).parent().append('<ul class="sortList"><li>123</li></ul>');
      $(".sortList").sortable('refresh');
    })
$(".sortList").sortable({
    connectWith: ".sortList"
}).disableSelection();

});

Here is a jsfiddle http://jsfiddle.net/6nL0rm1a/5/ showing my problem. As you see if you click the button a new list is added. But you cant sort/drag & drop its items to other lists.

I want the items of the appended list to be draggable & droppable. Also sortable

#javascript #jquery