title: jquery inline editor behaviour
body: <p>I am using the below code to try and build a double clickable simple inline editing function, I have the css, ajax etc worked out fine (not shown). The problem is when I have edited selected text it changes fine but also changes all the other text on the page to the newly inputted text. Does anybody have any suggestions as to why it would deb doing this and a possible fix?</p>
  
  <pre><code>(function($) {
      $.fn.editable = function() {
          $('#id').val($(this).attr('id'));
          var id = $(this).attr('id');
          var textBlock = $(this);
          var textBox = $('&lt;input type="text"/&gt;');
          textBox.hide().insertAfter(textBlock).val(textBlock.html());
          textBlock.dblclick(function() {
              toggleVisiblity(true);
          });
  
          textBox.blur(function() {
              toggleVisiblity(false);
          });
  
          toggleVisiblity = function(editMode) {
              if (editMode == true) {
                  textBlock.hide();
                  textBox.show().focus();
                  textBox[0].value = textBox[0].value;
              }
              else {
                  textBlock.show();
                  textBox.hide();
                  textBlock.html(textBox.val());
              }
          };
      };
  })(jQuery);
  
  $(function() {
      var $edit = $('.edit').editable('#id');
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p class="edit"&gt;Test text 1&lt;/p&gt;
  &lt;p class="edit"&gt;Test text 2&lt;/p&gt;
  </code></pre>