.html elements adopting wrong id?

.html elements adopting wrong id?

Hi, I'm really new to Javascript/jQuery. I'm pretty sure this is a fundamental basic, but I've yet to cover it. (lack of time and good source material)

Anyhow, my problem is that when I get jQuery to write a new HTML element, that element isn't responding correctly to additional code that relates to it. It's relating to the container that the new code was written into, but not the new code.

  1. $("#mainCenter").delay(2700).fadeIn(400).html("<div id='newBox'> </div><br><div id='newBox2'> </div><div id='newBox3'> </div>");         });
    });

  2. $(document).ready(function(){
        $("#newBox").click(function(){
        $("#newBox").animate({left:'+=400px'},1000);

       });
    });





  3. CSS
  4. #newBox {
    width:10px;
    height:10px;
    border:solid black 1px;
    background:red;
    position:fixed;
    top:300px;
    left:440px;
    z-index:100;
    float:left;
    }


    #mainCenter {
    display:none;
    }
             
















I was wondering if anyone could help me understand the relationship between the elements in this situation? Should I create a new line of code to remove the "maincenter" ? ...  Just tried that and it removed the new content, obviously because the new content is inside "maincenter". Though if I use .after the .delay is initiated and additional code relating to it doesn't work either :S

Any advice? Also if you know of any good reading material on Javascript/jQuery I'd love to hear about it.
Thanks in advance