Why is my div not shown in the HTML browser sheet?

Question

I have a code what I am currently working on and I am using Firebug to identify the console errors and how the HTML is shown and I am writing my code in Notepad++. My project is to animate some eyes and basically make their pupils follow the cursor. In my HTML code I defined the divs and the classes and with Jquery draw the face, the eye and the pupils. Sadly my right pupil is not showing on the screen, and when I looked up the HTML code with firebug near my left eye there was an expand button which when clicked on shows me the div linked to the left eye div : the left pupil. On the right eye howver there is no expand button and I have no sub dif. In my source code, howver, the right pupil div is defined:

    <div id="todo">
    <div id="leftEye" class="Eye">
                <div id="leftPupile" class= "pupile">
            </div>
        </div>  
    <div id="rightEye" class="eye">
            <div id="rightPupile" class = "pupile">
             </div>
               </div>  
    </div>

In Jquery I have following code:

                $("#todo").css("width","280px");
                $("#todo").css("height","150px");
                $("#todo").css("text-align","center");
                $(".eye").css("width","100px");
                $(".eye").css("height","50px");
                $(".eye").css("background-color","#DDF");
                $(".eye").css("border","1px solid blue");
                $(".eye").css("text-align","center");
                $(".eye").css("position","relative");
                $("#leftEye").css("float","left");
                $("#leftEye").css("margin","0")
                $("#rightEye").css("float","right");
                $("#rightEye").css("margin","0")
                $(".pupile").css("background-color","#000");
                $(".pupile").css("width","20px");
                $(".pupile").css("height","20px");
                $(".pupile").css("border-radius","10px");
                $(".pupile").css("position","absolute");
                $("#leftPupil").css("bottom","10px");
                $("#leftPupil").css("right","10px");
                  var pupileRight = $("<div></div>");
                pupileRight.css("background-color", "#000");
                pupileRight.css("width", "20px");
                pupileRight.css("height", "20px");
                pupileRight.css("border-radius", "10px");
                pupileRight.css("position", "absolute");
                pupileRight.css("bottom", "10px");
                pupileRight.css("right", "10px");

You will notice I tried to create the div with Jquery and call a variable pupilRight to which I gave all the attributs the class ".pupil" should have. I tried that because I tried drawing it normally with Jquery and it did not appear on the screen. I do not understand why the firebug shows me no div under my rightEye dif as it is shown under the leftEye. If I try edit the HTML in firebug and add the dif, the pupile apears, but since it is firebug, the soon as I refresh the page it dissapers. I tried with other plugins that sync the firebug changes but that did not work either. Does anyne know what the issue is?