title: How to change <li> to <input> then back to <li> with new value?
body: <p>I am trying to turn all <code>div</code> elements within each <code>li</code> into an input when the <strong>Edit</strong> button is clicked. Then when <strong>Save</strong> is clicked, all the inputs revert back to a <code>div</code> and save the new value that is in the input. The issue I have is that the top input value gets saved to all <code>div</code> elements. I want each value to save to its own <code>div</code>. For example, if the top <code>li div</code> is left unchanged and the bottom is changed to a new value, that new value will only save to the bottom <code>li div</code>.</p>
  
  <p>Pretty new to this, so any help would be greatly appreciated! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function toInput() {
      var inner = document.querySelector('.listItem div');
      console.log(inner);
      $('.listItem div').replaceWith('&lt;input value="' + inner.innerHTML + '"&gt;' );  
  }
  
  function saveInput() {
      var inputVal = $('.listItem input').val();
      console.log(inputVal);
      $('.listItem input').replaceWith('&lt;div&gt;' + inputVal + '&lt;/div&gt;' );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul id="data"&gt;
      &lt;li class="listItem"&gt;
          Test 1: &lt;div&gt;Item 1&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="listItem"&gt;
          Test 2: &lt;div&gt;Item 1&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;button class='save' onclick="saveInput();"&gt;Save&lt;/button&gt;
  &lt;button class='edit' onclick="toInput();"&gt;Edit&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>