Creating and deleting symbols dynamically

I need help with getting this particular function implemented.

I have 2 buttons with codes which I've added

//Create button

$.getJSON("content.JSON")

  .success(

  function(data){

  console.log("incoming data: ", data);

  //console.log("this is current value of var s", template);

  if (s == null)

  {

  $.each(data, function(index, item){

  //var s = sym.createChildSymbol( "template", "content");

  s = sym.createChildSymbol( "template", "content" );

  // Creating the variable that save my new instance of mySymbol

  sym.setVariable("itemContainer"+i, s);

  console.log("item container name", s);

  s.$("title").html( item.item );

  s.$("description").html( item.description );

  s.play(index * -500);

  i++;

  //console.log("'dressbtn' inside was CLICKED");

  });

  }

  else

  {

  }

  });

//Delete button

for(var p = 1; p <= i; p++)

{

s = sym.getVariable("itemContainer"+p);

s.deleteSymbol();

}

i = 1;

So the two buttons one will get the items from Json and display them, and the other will clear the symbols created.

But I've only managed to clear the symbols on stage only once, and after that I'm getting Javascript error in event handler! Event Type = element

The reason is because I'm trying to make an app that can get information off a json file from a webserver and able to update and display the lastest information in the app. So I've to be able to allow the user to press a button to refresh the page.

Can anyone shine some light on this?

Dropbox - test.zip