My code executes correctly the first time, but not the second (Javascript). It seems that a variable is not updated correclty
<p>I am creating a jquery plugin. Whenever you double click on a tag that has class .editable it will replace it with either a textbox or a textarea. When you click outside of the .editable tag then it will write then it will remove the textbox or textarea and write the original content back.</p>

<p>The first time I do this it works as its supposed to. However, if I click on a different content field the second time when I click off it is replaced with the content of the editable area that I clicked on the first time. </p>

<p>To see what I'm talking about go to <a href="http://modx.harrishosting.com" rel="nofollow">modx.harrishosting.com</a> and doubleclick on home. Click on a different part of the webpage and it will return to normal. Now, doubleclick on the lerem ipsum content and click on a separate portion of the webpage. Instead of going back to normal the Lorem ipsum content is replaced with the home content. </p>

<p>Here is my code. Please help!</p>

<pre><code>jQuery.fn.jqfEdit = function(){
    return this.each(function(){

        // Save "this" to "editable" because this changes when scope changes
        var editable = this;

        // Fix to display box-shaddow correctly when editable area is highlighted       
        $(editable).css({'display':'inline-block'});

        // Highlight editable area with box-shaddow on hover
        if (!($(editable).hasClass('.selected'))) {

            // What to do on mouse over
            $(editable).mouseenter(
                function() {
                    $(editable).css({'-moz-box-shadow' : '0px 0px 10px #eec900', '-webkit-box-shadow' : '0px 0px 10px #eec900', 'box-shadow' : '0px 0px 10px #eec900'});
                }

            // What to do on mouse out.
            ).mouseleave(
                function() {
                    $(editable).css({'-moz-box-shadow' : '0px 0px 0px #eec900', '-webkit-box-shadow' : '0px 0px 0px #eec900', 'box-shadow' : '0px 0px 0px #eec900'});
                }
            );
        }

        // Ending the if statement
        else {
        }

        // TO DO: Fix double/double click bug in textarea

        // What to do when double clicking an editable area
        $(editable).dblclick(function() {

            // Give the editable area the class "selected"
            $(editable).toggleClass('selected');

            // What to do if editable area is selected (has "selected" class)
            if ($(editable).hasClass('selected')) {

                // Remove the previously given highlight (box-shaddow) from the editable area
                $(editable).css({'-moz-box-shadow' : '0px 0px 0px #eec900', '-webkit-box-shadow' : '0px 0px 0px #eec900', 'box-shadow' : '0px 0px 0px #eec900'});


                // Take everything inside of editable div and assign it to variable named "content"
                var content = $(editable).html();

                // Get the height and width of editable div.
                var height = $(editable).height();
                var width = $(editable).width();

                // Add a few pixels to the width for textbox
                var textBoxHeight = height+5;
                var textBoxWidth = width+10;

                // If length of content is less than 50 characters then use a textbox
                if (content.length &lt; 50) {
                    $('.selected').html('&lt;form id="myForm"&gt; &lt;input id="jqfEdit-textbox" type="text" style="height:' + textBoxHeight + '; width:' + textBoxWidth + '; padding: 2px;" name="myname" value="' + content + '" /&gt; &lt;input type="submit" value="Ok" /&gt; &lt;input type="button" name="Cancel" value="Cancel" /&gt; &lt;/form&gt;');

                    // If you click outside of editable div while textbox is focused then remove the editable area and change back to normal.
                    if ($('#jqfEdit-textbox').focus()) {
                        $('body').click(function() {

                            if ($('.selected').html(content)) {
                                $('.selected').toggleClass('selected');
                            }

                        });
                        $(editable).click(function(event){

                            event.stopPropagation();

                        });

                    }

                }

                // If length of content is more than 50 characters then use a textarea
                else {
                    $('.selected').html('&lt;form id="myForm"&gt; &lt;textarea id="jqfEdit-textarea" type="text" style="height:' + height + '; width:' + width + ';" name="myname"&gt;' + content + '&lt;/textarea&gt; &lt;input type="submit" value="Ok" /&gt; &lt;input type="button" name="Cancel" value="Cancel" /&gt; &lt;/form&gt;');

                    // If you click outside of editable div while textbox is focused then remove the editable area and change back to normal.
                    if ($('#jqfEdit-textarea').focus()) {
                        $('body').click(function() {

                            if ($('.selected').html(content)) {
                                $('.selected').toggleClass('selected');
                            }

                        });
                        $(editable).click(function(event){

                            event.stopPropagation();

                        });

                    }
                }             
            }
        });
    });

};
</code></pre>
