jQuery appending to a dynamically created div

Question

Trying to add a save/load feature using JSON to a diagram that uses jsPlumb. The save feature works like a charm however the load feature is not able to replicate full initial saved state. That is, the problem occurs when jQuery is trying to append to a freshly/dynamically created div.

The jsfiddle has the following functionality: I can add projects which are div containers. Inside these I can add tasks by clicking on the green projects.

http://jsfiddle.net/9yej6/1/

My saving code plugins everything into an array which then becomes a string (using JSON).

$('#saveall').click(function(e) {
    // Saving all of the projects' parameters
    var projects = []
    $(".project").each(function (idx, elem) {
      var $elem = $(elem);
      projects.push({
        blockId: $elem.attr('id'),
        positionX: parseInt($elem.css("left"), 10),
        positionY: parseInt($elem.css("top"), 10)
      });
    });

    // Saving all of the tasks' parameters
    var tasks = []
    $(".task").each(function (idx, elem) {
      var $elem = $(elem);
      tasks.push({
        blockId: $elem.attr('id'),
        parentId: $elem.parent().attr('id')
      });
    });

    // Convert into string and copy to textarea
    var flowChart = {};
    flowChart.projects = projects;
    flowChart.tasks = tasks;
    var flowChartJson = JSON.stringify(flowChart);
    $('#jsonOutput').val(flowChartJson);
});

The load code does the same in reverse.

  $('#loadall').click(function(e) {
      // Delete everything from the container
      $('#container').text("");

      // Convert textarea string into JSON object
      var flowChartJson = $('#jsonOutput').val();
      var flowChart = JSON.parse(flowChartJson);

      // Load all projects
      var projects = flowChart.projects;
      $.each(projects, function( index, elem ) {
        addProject(elem.blockId);
        repositionElement(elem.blockId, elem.positionX, elem.positionY)
      });

      // Try to load all tasks
      var tasks = flowChart.tasks;
      $.each(tasks, function( index, elem ) {
        //Problem occurs here, I am unable to reference the created project
        $(elem.parentId).text('This is a test');
        addTask(elem.parentId, 0);
      });   
 });

Basically, what's not working is the $(parentId).append(newState); line 75 in the jsFiddle, I can't seem to reference that div because it was just created using jquery ?

edit: More specifically, I make use of these functions to create actual project and task divs

function addProject(id) {  
var newProject = $('<div>').attr('id', id).addClass('project').text(id);

  $('#container').append(newProject);

  jsPlumb.draggable(newProject, {
    containment: 'parent'   }); 
}

function addTask(parentId, index) {
var newState = $('<div>').attr('id', 'state' + index).addClass('task').text('task ' + index);

  $(parentId).append(newState);
}

Answer 1

It should be:

$('#' + parentId).append(newState);

To search for an ID in a jQuery selector, you need the # prefix.