Creating a new draggable

Creating a new draggable


Pardon my stupidity.
I have a draggable element. I have li elements to represent the
various items in the draggable. I have a button. When I click the
button, I want to add a new draggable item (an li) to the list. I get
the item added successfully, but it is not draggable (though the
original items are). What is my brain damage?
The code (or a rough facsimile):
function addItem(data, name)
{
    var entries = data.split(",");
    for(idx = 0; idx < entries.length; idx++)
    {
        var keyValue = entries[idx].split(":");
        if ( keyValue[0] == "id")
        {
            idValue = keyValue[1];
        }
        if ( keyValue[0] == "name")
        {
            nameValue = keyValue[1];
        }
    }
    // build the li
    var newElem = document.createElement("li");
    newElem.setAttribute('title', name);
    newElem.setAttribute('class', 'ui-default-state master-element');
    newElem.id = idValue;
    newElem.innerHTML = nameValue;
    // add the li to the proper list
    var mySelector = '#'+name+' > fieldset > ul.master-list';
    $(mySelector).append(newElem);
    $(mySelector).sortable("refresh");
}
$(function() {
    $("#survey-list .master-list > li").draggable({
        helper: 'clone',
        revert: 'invalid'
    });
    $(".button-set button").click(function(event){
        // determine what action to take
        // could be edit, could be trash
        var currName = $(this).context.name;
        switch( $(this).context.value )
        {
            case 'edit':
            $.post("assets/snippets/SurveyTool/ProcessAjax.php",
                { name: currName, action: "new" },
                function(data){
                 // add to the list
                 addItem(data, currName);
                });
            break;
        }
    });
});
<div id="survey-list">
<fieldset>
<legend>Surveys</legend>
<ul class="master-list">
<li class="ui-default-state master-element" id="1"
title="survey-list">Survey1</li>
<li class="ui-default-state master-element" id="2"
title="survey-list">Survey2</li>
</ul>
<div class="button-set">
<button name="survey-list" value="edit"><img class="ui-
icon ui-icon-pencil" /></button>
</div>
</fieldset>
</div>
When I run, Survey1 and Survey2 are draggable, but the new item
("default survey") is not.