javascript/jquery variable not defined
<p>the script has 5 panels 3 of which are selectable and trigger the onclick event below.</p>

<p>it works fine and even alerts the value of "selectedID"</p>

<p>but when i try to change the values on the inputs and trigger the on click, keyup it gives me the error "selectedID not defined"</p>

<p><strong>Here is my JS</strong></p>

<pre><code>    jQuery(document).ready(function($) {

///////////
     $("div.door").click(function () {

         resetall();
          $("div.door").removeClass("panelselected");
          $(this).toggleClass("panelselected");
          var selectedID = $(this).attr("id"); 
              alert(selectedID);


          $("#customisedoor").fadeIn("slow");
          $("#"+selectedID).animate({
                height: 118-Number($("#doorheight").val())*2+"px"

           }, 200 );
           var height = 118-Number($("#doorheight").val())*2;
           var topmargin = Number($("#doorheight").val())*2;
          $("#"+selectedID).css("margin-top", topmargin+"px");
          ////////////////////////////IF PANEL 2
          if(selectedID === 'panel2'){
$("#panel1").append('&lt;img src="images/draught-skirts/button.png" class="button right appended"/&gt;');
$("#panel3").append('&lt;img src="images/draught-skirts/button.png" class="button left appended"/&gt;');
          }
          ///////////////////////IF PANEL 3
          if(selectedID === 'panel3'){
$("#panel2").append('&lt;img src="images/draught-skirts/button.png" class="button right appended"/&gt;');  
$("#panel4").append('&lt;img src="images/draught-skirts/button.png" class="button left appended"/&gt;'); 
          }
          /////////////////////////
          ///////////////////////IF PANEL 3
          if(selectedID === 'panel4'){
$("#panel3").append('&lt;img src="images/draught-skirts/button.png" class="button right appended"/&gt;');  
$("#panel5").append('&lt;img src="images/draught-skirts/button.png" class="button left appended"/&gt;'); 
          }
          /////////////////////////
    });

    $("#doorwidth").keyup(function (){

           $("#"+selectedID).animate({
                width: $("#doorwidth").val()*2+"px"
              }, 200 );
$("#totalwidth").val(
    parseInt(300) + parseInt($("#doorwidth").val())
    );

});
    $("#doorwidth").click(function (){

           $("#"+selectedID).animate({
                width: $("#doorwidth").val()*2+"px"
              }, 200 );
$("#totalwidth").val(
    parseInt(300) + parseInt($("#doorwidth").val())
    );

});
    function calculateheight(){
         $("#"+selectedID).animate({
                height: 118-$("#doorheight").val()*2+"px"

              }, 200 );
              height = 118-$("#doorheight").val()*2;
              topmargin = $("#doorheight").val()*2;
        $("#"+selectedID).css("margin-top", topmargin+"px")
    }

        $("#doorheight").keyup(function (){
          calculateheight();
          });

        $("#doorheight").click(function (){
          calculateheight();

    });

    function resetall(){
        $(".appended").remove();
        $(".door").css({'width':'150','height':'118','margin':'0px'});
        $(".door").removeClass("panelselected");
        $("#doorheight").val(30);
        $("#doorwidth").val(75);
        $("#totalwidth").val(300+$("#doorwidth").val());

    }

    $("#reset").click(function () {
        //alert("removed");
        resetall();
    });
    //////////////////////////////////////////////////////////////////

    });
</code></pre>

<p><strong>Full source FROM Firefox</strong></p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;!-- JS --&gt;

&lt;script type="text/javascript" src="plugins/validator/jquery-1.4.4.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="plugins/ui/jquery.effects.core.js"&gt;&lt;/script&gt;



&lt;!-- STYLES --&gt;

&lt;style&gt;
&lt;!-- LAYOUT --&gt;


&lt;!-- SKIRTS --&gt;
.panelContainer{
height:128px;
width:900px;
float:left; 
}

.endpanel{
width:150px;
float:left;
height:118px;
background:#BFDDF2; 
border:1px solid #7DB8DB;
}
.panel{
width:150px;
bottom:0;
float:left;
height:118px;
background:#BFDDF2; 
border:1px solid #7DB8DB;
}

.mid{
    border-left:0px;
    }

.door:hover{
width:150px;
float:left;
height:118px;
background:#ECF5FB; 
border:1px solid #fff;
}

.panelselected{
width:150px;
float:left;
height:118px;
background:#ECF5FB; 
border:1px solid #fff;
}
.container{
    min-width:150px;
    width:auto;
    float:left;
    margin-top:3px;
    height:7px; 
    }

.button{
    width:7px; height:7px;
    margin:3px;

    }
.left{float:left;}
.right{float:right;}






&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div style="width:780px; height:80px;float:left;"&gt;
    &lt;h3&gt;Please select a panel and customise the width and height to fit under your door step / doorway&lt;/h3&gt;       

     &lt;ul&gt;
        &lt;li&gt;Total Draught Skirt Width: &lt;input type="text" disabled id="totalwidth" value="375"/&gt;(CMS)   &lt;/li&gt;
     &lt;/ul&gt;
&lt;/div&gt;
&lt;!-- CUSTOMISE DOOR --&gt;



&lt;div style="margin-top:20px; min-width:780px; height:80px;float:left;position:relative;"&gt;
        &lt;div class="endpanel" id="panel1"&gt;
            &lt;img src="images/draught-skirts/button.png" class="button left"/&gt;
        &lt;/div&gt;
        &lt;div id="panel2" class="panel mid door"&gt;

        &lt;/div&gt;
        &lt;div id="panel3" class="panel mid door"&gt;&lt;/div&gt;
        &lt;div id="panel4" class="panel mid door"&gt;&lt;/div&gt;
        &lt;div class="endpanel mid" id="panel5"&gt;

            &lt;img src="images/draught-skirts/button.png" class="button right"/&gt;
        &lt;/div&gt;
&lt;/div&gt;

   &lt;div id="customisedoor" style="clear:both; margin-top:50px;width:400px; height:80px;float:left; display:none;"&gt;


        &lt;strong&gt;Customise Your Door Panel&lt;/strong&gt;
    &lt;table&gt;
        &lt;tr&gt;
            &lt;td&gt;Width&lt;/td&gt;

            &lt;td&gt;
                &lt;input type="number" name="width" id="doorwidth" value="75"/&gt;(CMS)
            &lt;/td&gt;
        &lt;/tr&gt;
         &lt;tr&gt;
            &lt;td&gt;Height From Top of Skirt: &lt;/td&gt;
            &lt;td&gt;
                &lt;input type="number" name="height" id="doorheight" value="30"/&gt;(CMS)
            &lt;/td&gt;

       &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="button" id="reset" value="Reset"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
        &lt;/table&gt;


    &lt;/div&gt;

    &lt;script type="text/javascript"&gt;

    jQuery(document).ready(function($) {

///////////
     $("div.door").click(function () {
         resetall();
          $("div.door").removeClass("panelselected");
          $(this).toggleClass("panelselected");
          var selectedID = $(this).attr("id");


          $("#customisedoor").fadeIn("slow");
          $("#"+selectedID).animate({
                height: 118-Number($("#doorheight").val())*2+"px"

           }, 200 );
           var height = 118-Number($("#doorheight").val())*2;
           var topmargin = Number($("#doorheight").val())*2;
          $("#"+selectedID).css("margin-top", topmargin+"px");
          ////////////////////////////IF PANEL 2
          if(selectedID === 'panel2'){
$("#panel1").append('&lt;img src="images/draught-skirts/button.png" class="button right appended"/&gt;');
$("#panel3").append('&lt;img src="images/draught-skirts/button.png" class="button left appended"/&gt;');
          }
          ///////////////////////IF PANEL 3
          if(selectedID === 'panel3'){
$("#panel2").append('&lt;img src="images/draught-skirts/button.png" class="button right appended"/&gt;');  
$("#panel4").append('&lt;img src="images/draught-skirts/button.png" class="button left appended"/&gt;'); 
          }
          /////////////////////////
          ///////////////////////IF PANEL 3
          if(selectedID === 'panel4'){
$("#panel3").append('&lt;img src="images/draught-skirts/button.png" class="button right appended"/&gt;');  
$("#panel5").append('&lt;img src="images/draught-skirts/button.png" class="button left appended"/&gt;'); 
          }
          /////////////////////////
    });

    $("#doorwidth").keyup(function (){
                  alert("IDis"+selectedID);
           $("#"+selectedID).animate({
                width: $("#doorwidth").val()*2+"px"
              }, 200 );
$("#totalwidth").val(
    parseInt(300) + parseInt($("#doorwidth").val())
    );

});
    $("#doorwidth").click(function (){
        alert("IDis"+selectedID);
           $("#"+selectedID).animate({
                width: $("#doorwidth").val()*2+"px"
              }, 200 );
$("#totalwidth").val(
    parseInt(300) + parseInt($("#doorwidth").val())
    );

});
    function calculateheight(){
         $("#"+selectedID).animate({
                height: 118-$("#doorheight").val()*2+"px"

              }, 200 );
              height = 118-$("#doorheight").val()*2;
              topmargin = $("#doorheight").val()*2;
        $("#"+selectedID).css("margin-top", topmargin+"px")
    }

        $("#doorheight").keyup(function (){
          calculateheight();
          });

        $("#doorheight").click(function (){
          calculateheight();

    });

    function resetall(){
        $(".appended").remove();
        $(".door").css({'width':'150','height':'118','margin':'0px'});
        $(".door").removeClass("panelselected");
        $("#doorheight").val(30);
        $("#doorwidth").val(75);
        $("#totalwidth").val(300+$("#doorwidth").val());

    }

    $("#reset").click(function () {
        //alert("removed");
        resetall();
    });
    //////////////////////////////////////////////////////////////////

    });
    &lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
