title: How to make some text content in a div editable on click?
body: <p>I want a editbox editable when we click on div as we accomplish this by clicking on "Div editable".It work great for single id Can you please tell how to make it for multiple id's.Thanks in advance.</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
         &lt;td&gt;
            Editable Div (double click text to the right, to enter edit mode)  :   
         &lt;/td&gt;
         &lt;td&gt;
           &lt;div id="makeEditable"&gt;Div editable&lt;/div&gt;
         &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  
  (function($) {
  $.fn.editable = function() {
      var textBlock = $(this);
      // Create a new input to allow editing text on double click
      var textBox = $('&lt;input/&gt;');
      textBox.hide().insertAfter(textBlock).val(textBlock.html());
  
      // Hiding the div and showing a input to allow editing the value.
      textBlock.dblclick(function() {
          toggleVisiblity(true);
      });
      // Hiding the input and showing the original div
      textBox.blur(function() {
          toggleVisiblity(false);
      });
  
      toggleVisiblity = function(editMode) {
          if (editMode == true) {
              textBlock.hide();
              textBox.show().focus();
              // workaround, to move the cursor at the end in input box.
              textBox[0].value = textBox[0].value;
          }
          else {
              textBlock.show();
              textBox.hide();
              textBlock.html(textBox.val());
          }
      };
  };
  
  })(jQuery);
  $(function() {
      var $edit = $('#makeEditable').editable();
  });
  </code></pre>