I am getting the following error (using Firefox 3.5.9):

$("#dragMe_" + myCount).draggable is not a function
$("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' });  Line 231 
http://www.liamharding.com/pgi/pgi.php

Link to page in question : http://www.liamharding.com/pgi/pgi.php

For example, click the 2 checkbox's 'R25 + R50 Random Walk' then click Show/Refresh Graphs. Two graphs should be displayed, both with draggable thin horizontal red lines.

Re-open the options panel and de-select R50 Random Walk, now click Show/Refresh Graphs again, 1 graph is removed and the other updated; now re-select R50 Random Walk and click Show/Refresh, you will find the still checked R25 graph gets updated ok the above error occurs and i cant figure out why.

Initially, when displaying the first 2 graphs it uses the same code and it works just fine.

The error occurs on this line:

//********* ERROR OCCURS HERE **********
$("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' });

Here is the code for the Show/Refresh Graphs.click() event:

$("#btnShowGraphs").click(function(){
        // Hide 'Options' panel (only if open AND an index is checked)
        if (IsOptionsPanelOpen && ($("#indexCheck:checked").length != 0)) {$('#optionImgDiv').click();};

        var myCount = 0;
        var divIsNew = false;
        var gif_loader_small = '<div id="gif_loader_small"></div>';
        var gif_loader_big = '<div id="gif_loader_big"></div>';

        $("input:checkbox[id=indexCheck]").each(function() {

            if (this.checked) {
                // check for an existing wrapper div for the current forex item, using the current checkbox value (foxex name)
                if ( $("#"+this.value).length == 0 ) {

                    console.log("New 'graphContainer' div : "+this.value);

                    divIsNew = true;
                    // Create new divs for graph image, drag bar and heading
                    var $structure = " \
                        <li id=\""+this.value+"\" class=\"graphContainer\"> \
                            <div id=\"dragMe_"+myCount+"\" class=\"dragMe\"></div> \
                            <div id=\"image_"+myCount+"\" class=\"image\"></div> \
                            <div id=\"heading_"+myCount+"\" class=\"heading\"></div> \
                        </li> \
                    ";
                    $('#graphResults').append($structure);
                    // Hide dragMe DIV
                    $('#dragMe_'+myCount).hide();
                    // Make 'dragMe' draggable div

                    //********* ERROR OCCURS HERE **********
                    $("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' });
                }

                // Display small loading gif
                $(gif_loader_small).clone().appendTo( $(this).parent() );

                // Display large circular loading gif
                var $loader = $(gif_loader_big);
                // add temporary css attributes onto existing graph divs as they need to be displayed diffrently
                if(!divIsNew){

                    console.log("Reposition existing 'gif_loader_big' div");

                    $loader = $(gif_loader_big).css({
                        "position" : "absolute",
                        "top" : "35%",
                        "opacity" : ".85"});
                }

                // add newly styled big-loader-gif to index div
                $loader.clone().prependTo( $("#"+this.value) );

                // Call function to fetch image using ajax
                get_graph(this, myCount, divIsNew);

            } else { 
                // REMOVE 'graphContainer' DIVS NOT CHECKED
                // check for div existance
                if ( $("#"+this.value).length != 0 ) {

                    console.log("DESTROY: #dragMe_"+myCount+", REMOVE: #"+this.value);

                    // DESTROY draggable
                    //$("#dragMe_"+myCount).draggable("destroy");
                    // remove div
                    $("#"+this.value).remove();
                }
            }
            // reset counters and other variables
            myCount++;
            divIsNew = false;

            console.log("Complete: "+this.value+", NEXT index");

        });
    });