title: How do I make an editable UL LI list using jQuery?
body: <p>I need your help with something. I am attempting to try and add the ability for the user to be able to real time edit a UL LI list by being able to click on the LI element. Then, upon clicking on the LI element, the element is changed to that of input box with the LI's current text value.</p>
  
  <p>Then, when the user clicks off of the LI element the input box goes away and the LI element is returned to its normal state with the newly updated value.</p>
  
  <p>I am trying to accomplish the above, however, with the current state of my code, it just adds another box, and does not actually allow me to click inside of it to add a new value. And also, when I click onto a new LI element, it just keeps adding another box and so on and so on.</p>
  
  <p>Here's a fiddle:
  <a href="https://jsfiddle.net/0o0n8rea/" rel="nofollow noreferrer">https://jsfiddle.net/0o0n8rea/</a></p>
  
  <p>Here's the code in question:</p>
  
  <pre><code>window.onload = function() {
  
      $("#refdocs_list li").click(function(){
  
          $(this).html('&lt;input type="text" value='+ $(this).text() +'&gt;').focus()
  
      });
  
      $("#refdocs_list li").focusout(function(){
  
      });
  
  }
  </code></pre>
  
  <p>Here is the HTML markup:</p>
  
  <pre><code>&lt;div class="field_outline" style="background: #FFF; min-height: 75px; max-height: 300px; overflow-y: auto;"&gt;
  
      &lt;ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;"&gt;
  
          &lt;li&gt;test1&lt;/li&gt;
          &lt;li&gt;test2&lt;/li&gt;
          &lt;li&gt;test3&lt;/li&gt;
  
      &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>