Replacing symbols dynamically

Question

Hi all,
I am trying to make a fairly simple user interface. I have 3 buttons on stage and each button will pull out a correspoinding symbol from the library and display it on the stage.
Eg. Click btn1 and it will show content1 from the library.
So far it is working in that it shows the corresponding content but it appends subsequent content to the bottom of it. I need the content to be replaced instead.
If you would be so kind as to offer some advice, consider this:
I would prefer if I could dynamically get content from the library instead of having items on stage that are set to 'hide' and 'show'.
Note: I noticed that when you create a child symbol on stage that Edge gives it a randomly generated ID. There is some code towards the bottom that tries to rename its ID attribute. I am not 100% sure if it is even doing what I expect it to do. Any improvements are welcome.
var btnArray = ['btn1','btn2','btn3']
function init(){
          for (var i = 0; i < btnArray.length; ++i) {
                    var j = i+1;
                    initBtns(j);
function initBtns(num){
          sym.$('btn'+num).click(function(){
                    showContent(num);
function showContent(num){
          var content = sym.createChildSymbol("content"+num, "Stage");
          content.getSymbolElement().css({
   "top":"0px",
   "left":"0px" 
   var oldID = content.getSymbolElement().attr("id");
   sym.setVariable("oldID", "content"+num);
   var newID = sym.getVariable("oldID");
   content.getSymbolElement().attr("id",newID);
   alert(content.getSymbolElement().attr("id"));
init();

Answer 1

With some help from a colleague I have found the solutioin. Hope it helps anyone else out there with a similar issue. One of the main issues was the a variable was declared localy and needed to be global. See below for full working code.
var btnArray = ['btn1','btn2','btn3'];
var myBoolean = false;
function init(){
          for (var i = 0; i < btnArray.length; ++i) {
                    var j = i+1;
                    initBtns(j);
function initBtns(num){
          sym.$('btn'+num).click(function(){
                    showContent(num);
function showContent(num){
          if(sym.myBoolean){
                    sym.getSymbol(sym.content.getSymbolElement()).deleteSymbol();
          sym.content = sym.createChildSymbol("content"+num, "Stage");
          sym.content.getSymbolElement().css({ "top":"0px", "left":"0px" });
   var oldID = sym.content.getSymbolElement().attr("id");
   sym.setVariable(oldID, "content"+num);
   var newID = sym.getVariable(oldID);
   sym.content.getSymbolElement().attr("id",newID);
   sym.myBoolean = true;
init();