title: JavaScript Todo List - When I click 'edit' button, it selects the wrong text input, but still edits the correct item
body: <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>const todoList = {
    todos: [],
  
    addTodo: function(todoText) {
      this.todos.push({
        todoText: todoText,
        completed: false
      });
      view.displayTodos();
    },
  
    changeTodo: function(position, newTodoText) {
      this.todos[position].todoText = newTodoText;
      view.displayTodos();
    },
  
    deleteTodo: function(position) {
      this.todos.splice(position, 1);
      view.displayTodos();
    },
  
    toggleCompleted: function(position) {
      let todo = this.todos[position];
      todo.completed = !todo.completed;
    },
  
    toggleAll: function() {
      const allTodos = this.todos.length;
      let completedTodos = 0;
  
      for (let i = 0; i &lt; allTodos; i++) {
        if (this.todos[i].completed === true) {
          completedTodos++;
        }
      }
  
      if (completedTodos === allTodos) {
        for (let i = 0; i &lt; allTodos; i++) {
          this.todos[i].completed = false;
        }
      } else {
        for (let i = 0; i &lt; allTodos; i++) {
          this.todos[i].completed = true;
        }
      }
  
      view.displayTodos();
    }
  };
  
  const handlers = {
    toggleAll: function() {
      todoList.toggleAll();
    },
  
    addTodo: function(e) {
      if (e.keyCode === 13) {
        e.preventDefault(); // Ensure it is only this code that rusn
        let todoTextInput = document.getElementById('todoTextInput');
        todoList.addTodo(todoTextInput.value);
        todoTextInput.value = '';
      }
    },
  
    deleteTodo: function(position) {
      todoList.deleteTodo(position);
    }
  };
  
  const view = {
  
    displayTodos: function() {
      let todosUl = document.getElementById('todoList');
      todosUl.innerHTML = '';
  
      for (let i = 0; i &lt; todoList.todos.length; i++) {
        let todoLi = document.createElement('li');
        let todoLiText = document.createElement('input');
        todoLiText.type = "text";
        todoLiText.disabled = true;
        todoLiText.id = 'textInput';
        let todoTextWithCompletion = todoList.todos[i].todoText;;
        let check = document.createElement('input');
        check.type = "checkbox";
        check.id = "checkbox";
        check.className = "checkbox";
        check.checked = '';
  
        todoLi.id = i;
        todoLiText.value = todoTextWithCompletion;
        todoLi.appendChild(check);
        todoLi.appendChild(todoLiText);
        todoLi.appendChild(this.createDeleteButton());
        todoLi.appendChild(this.createEditButton());
        todosUl.appendChild(todoLi);
  
        if (document.getElementById('checkbox').checked === true) {
          todoList.toggleCompleted(i);
        };
        if (todoList.todos[i].completed === true) {
          todoLiText.style.textDecoration = "line-through";
        };
  
      }
    },
  
    createDeleteButton: function() {
      let deleteButton = document.createElement('a');
      deleteButton.href = "#";
      deleteButton.textContent = "Delete";
      deleteButton.className = 'x';
      return deleteButton;
    },
  
    createEditButton: function() {
      let editButton = document.createElement('a');
      editButton.href = "#";
      editButton.textContent = "edit";
      editButton.className = 'edit';
      return editButton;
    },
  
    setUpEventListeners: function() {
      let todosUl = document.getElementById('todoList');
  
      todosUl.addEventListener('click', (event) =&gt; {
        let elementClicked = event.target;
  
        if (elementClicked.className === 'x') {
          handlers.deleteTodo(parseInt(elementClicked.parentNode.id));
        };
      });
  
      // Edit List Item
      todosUl.addEventListener('click', (event) =&gt; {
        let elementClicked = event.target;
        let position = elementClicked.parentNode.id;
  
        if (elementClicked.className === 'edit') {
          let input = document.getElementById('textInput');
  
          input.disabled = false;
          input.className += " activeTextInput ";
  
          input.focus();
          input.select();
  
          input.addEventListener('keyup', (event) =&gt; {
            let elementClicked = event.target;
  
            if (event.keyCode === 13) {
              let textInput = input.value;
              input.disabled = true;
              input.classList.remove("activeTextInput");
              todoList.changeTodo(position, textInput);
            };
          });
        };
      });
  
      // Line through on check
      todosUl.addEventListener('click', (event) =&gt; {
        let elementClicked = event.target;
        let position = elementClicked.parentNode.id;
        let check = document.getElementById('checkbox');
  
        if (elementClicked.className === 'checkbox') {
          todoList.toggleCompleted(position);
          check.checked = true;
        };
      });
  
      //Delete All
      let clearAll = document.getElementById('clearAll');
  
      clearAll.addEventListener('click', (event) =&gt; {
        todoList.todos.splice(0, todoList.todos.length);
        view.displayTodos();
      });
  
      // TODO Delete Selected
  
    }
  };
  
  view.setUpEventListeners();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    margin: 0;
    height: 100%;
  }
  
  body {
    background-color: #eeeeee !important;
  }
  
  h1 {
    color: #282845 !important;
  }
  
  p {
    opacity: .3;
  }
  
  .container {
    min-height: 70%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 50% !important;
  }
  
  #todoTextInput {
    background-color: white;
    opacity: .7;
    box-shadow: 1px 1px 10px rgba(5, 5, 5, 0.2);
    height: 50px;
    padding: 10px;
    border: none;
    font-style: italic;
  }
  
  ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
  }
  
  li {
    list-style-type: none !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.1);
    padding: 10px;
    background-color: white;
    box-shadow: 1px 1px 10px rgba(5, 5, 5, 0.2);
    min-width: inherit;
  }
  
  li a {
    float: right;
    padding-right: 10px;
    opacity: .3 !important;
    transition: .2s;
  }
  
  li a:hover {
    opacity: 1 !important;
  }
  
  input {
    border: none;
    border-bottom: 1px solid rgba(5, 5, 5, 0..01);
    background-color: inherit;
  }
  
  li input[type="text"] {
    padding: none;
    border: none;
    width: 80%;
    margin-left: 10px;
    transition: .5s;
  }
  
  .activeTextInput {
    box-shadow: 1px 1px 10px rgba(5, 5, 5, 0.1);
    padding: 10px !important;
  }
  
  input[type="text"] {
    background-color: inherit;
    border: none;
    border-bottom: 1px solid rgba(5, 5, 5, 0.01);
    padding: 0;
  }
  
  input:focus {
    outline: none;
  }
  
  input:checked+input[type="text"] {
    text-decoration: line-through;
    opacity: .5;
  }
  
  .btn {
    background-color: white !important;
    border-radius: 0 !important;
    padding: 0;
    box-shadow: 1px 1px 10px rgba(5, 5, 5, 0.2);
    margin-top: -2px !important;
    font-style: italic;
    opacity: 0.5;
  }
  
  #clearAll {
    margin-top: -21px !important;
  }
  
  .hidden {
    display: none !important;
    background-color: red !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" /&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;h1 class="text-center"&gt;List+&lt;/h1&gt;
  
      &lt;div class="row list-head"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;input type="text" placeholder="Enter a List Item" style="width: 100%" id="todoTextInput" onkeyup="handlers.addTodo(event)"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row list-container"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;ul id="todoList"&gt;
  
          &lt;/ul&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;button class="btn" style="width: 100%" id="clearAll"&gt;Clear All&lt;/button&gt;
          &lt;button class="btn" style="width: 100%"&gt;Clear Selected&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;p class="text-center"&gt;&lt;i&gt;Created by Connor Beam&lt;/i&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm building a todo list in vanilla JavaScript. I'm trying to get the 'edit' option to function properly. When I click the 'edit' button, the corresponding text input should be enabled, and auto-selected, then the user should be able to press 'enter' to submit changes.</p>
  
  <p>However, no matter which 'edit' button is clicked, he first text input is always selected, while still changing the correct item when submitted.</p>
  
  <p>Here's a working link to the most recent version: <a href="http://vanillajstodo.surge.sh/" rel="nofollow noreferrer">http://vanillajstodo.surge.sh/</a></p>
  
  <p>I believe the problem is that all 'todoLiText' inputs are being created with the same id; however, I'm not sure how to fix that.</p>
  
  <p>Let me know if more info is needed.</p>
  
  <p>Thanks</p>