title: Editing and Updating a HTML list with JavaScript
body: <p>I'm trying to create a list which I can edit/update. I'll need to be able to store the list information in a variable of some sort and display the information on a HTML page.</p>
  
  <p>My attempt is in the jsbin below.</p>
  
  <p><strong>JSBIN</strong></p>
  
  <p><a href="https://jsbin.com/luxobineze/edit?html,js,console,output" rel="nofollow noreferrer">https://jsbin.com/luxobineze/edit?html,js,console,output</a></p>
  
  <p>So with that code, I'd like to:</p>
  
  <ul>
  <li>Add names by filling in the form and clicking "Add Name"</li>
  <li>Click [Edit] which will fill the form with the name that is to be edited</li>
  <li>Click Update to update the global variable "names" (If I can do this, then I should be able to update the HTML's "List of Names" as well)</li>
  </ul>
  
  <p>I'm not sure what to do in the updateName function since I'm not sure how to pass the relevant arguments into it in order to update the correct list item. Do I need to use more global variables to keep track of the list item that's being edited? Or is there a better, more standard way of coding this?</p>
  
  <p>The code in the jsbin is here:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  Name: &lt;input type="text" id="name-input"&gt;&lt;br&gt;
  &lt;button id="add-name" class="button"&gt;Add Name&lt;/button&gt;
  &lt;button id="update" class="button"&gt;Update&lt;/button&gt;
  
  &lt;div id="list"&gt;List of Names&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>// global variable storing the list of names
  var names = [];
  
  function addName() {
      var name = document.getElementById("name-input").value;
      var list = document.getElementById("list");
  
      if(name) {
          names.push("name");
  
          var wrapper = document.createElement("div")
          wrapper.setAttribute("id", name)
  
          var div_name = document.createElement("div");
          div_name.appendChild(document.createTextNode(name))
  
          var div_edit = document.createElement("div")
          div_edit.appendChild(document.createTextNode("[edit]"))
          div_edit.addEventListener("click", editName)
  
          wrapper.appendChild(div_name)
          wrapper.appendChild(div_edit)
  
          list.appendChild(wrapper)
      }
  }
  
  function editName() {
      // Fill the input box with the name that you want to edit
      var name = this.parentElement.getAttribute("id")
      document.getElementById("name-input").value = name;
  }
  
  function updateName() {
      var new_name = document.getElementById("name-input").value
      // How do I update the global variable "names"?
  
  }
  
  document.getElementById("add-name").addEventListener("click", addName)
  document.getElementById("update").addEventListener("click", updateName)
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>I ended up using some global variables to keep track of which item was currently selected: <a href="https://jsbin.com/zupawesifu/1/edit?html,js,console,output" rel="nofollow noreferrer">https://jsbin.com/zupawesifu/1/edit?html,js,console,output</a></p>