title: Delete button doesn't show up on some of the tasks on the todo list
body: <p>I made a todo app, but you can't delete some of the items. I tried a lot of stuff, but it doesn't work. Can you help me understand the reason for the errors? I'm also trying to figure out a way to increase the character limit.</p>
  <p>html:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!-- Created By Zarif Sefat --&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;SideQuests | Simple Todo App&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
      &lt;script src=&quot;https://kit.fontawesome.com/a076d05399.js&quot;&gt;&lt;/script&gt;
      &lt;link rel=&quot;icon&quot; href=&quot;images/icon.png&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1 class=&quot;logo-or-something&quot;&gt;&lt;i class=&quot;fas fa-check-square&quot;&gt;&lt;/i&gt; SideQuests&lt;/h1&gt;
    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;header&gt;SIDE QUESTS&lt;/header&gt;
      &lt;div class=&quot;inputField&quot;&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Add your new side quest&quot;&gt;
        &lt;button&gt;&lt;i class=&quot;fas fa-plus&quot;&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;ul class=&quot;todoList&quot;&gt;
        &lt;!-- data are comes from local storage --&gt;
      &lt;/ul&gt;
      &lt;div class=&quot;footer&quot;&gt;
        &lt;span&gt;You have &lt;span class=&quot;pendingTasks&quot;&gt;&lt;/span&gt; pending side quests&lt;/span&gt;
        &lt;button&gt;Clear All&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>css:</p>
  <pre class="lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&amp;display=swap');
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
  }
  ::selection{
    color: #ffff;
    background: rgb(142, 73, 232);
  }
  body{
    width: 100%;
    height: 100vh;
    padding: 10px;
    background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%);
  }
  .wrapper{
    background: #fff;
    max-width: 400px;
    width: 100%;
    margin: 120px auto;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  }
  .wrapper header{
    font-size: 30px;
    font-weight: 600;
  }
  .wrapper .inputField{
    margin: 20px 0;
    width: 100%;
    display: flex;
    height: 45px;
  }
  .inputField input{
    width: 85%;
    height: 100%;
    outline: none;
    border-radius: 3px;
    border: 1px solid #ccc;
    font-size: 17px;
    padding-left: 15px;
    transition: all 0.3s ease;
  }
  .inputField input:focus{
    border-color: #8E49E8;
  }
  .inputField button{
    width: 50px;
    height: 100%;
    border: none;
    color: #fff;
    margin-left: 5px;
    font-size: 21px;
    outline: none;
    background: #8E49E8;
    cursor: pointer;
    border-radius: 3px;
    opacity: 0.6;
    pointer-events: none;
    transition: all 0.3s ease;
  }
  .inputField button:hover,
  .footer button:hover{
    background: #721ce3;
  }
  .inputField button.active{
    opacity: 1;
    pointer-events: auto;
  }
  .wrapper .todoList{
    max-height: 250px;
    overflow-y: auto;
  }
  .todoList li{
    position: relative;
    list-style: none;
    height: 45px;
    line-height: 45px;
    margin-bottom: 8px;
    background: #f2f2f2;
    border-radius: 3px;
    padding: 0 15px;
    cursor: default;
    overflow: hidden;
  }
  .todoList li .icon{
    position: absolute;
    right: -45px;
    background: #e74c3c;
    width: 45px;
    text-align: center;
    color: #fff;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .todoList li:hover .icon{
    right: 0px;
  }
  .wrapper .footer{
    display: flex;
    width: 100%;
    margin-top: 20px;
    align-items: center;
    justify-content: space-between;
  }
  .footer button{
    padding: 6px 10px;
    border-radius: 3px;
    border: none;
    outline: none;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    margin-left: 5px;
    background: #8E49E8;
    cursor: pointer;
    user-select: none;
    opacity: 0.6;
    pointer-events: none;
    transition: all 0.3s ease;
  }
  .footer button.active{
    opacity: 1;
    pointer-events: auto;
  }
  
  .logo-or-something {
    color: rgb(142, 73, 232);
  }
  </code></pre>
  <p>js:</p>
  <pre class="lang-javascript prettyprint-override"><code>// getting all required elements
  const inputBox = document.querySelector(&quot;.inputField input&quot;);
  const addBtn = document.querySelector(&quot;.inputField button&quot;);
  const todoList = document.querySelector(&quot;.todoList&quot;);
  const deleteAllBtn = document.querySelector(&quot;.footer button&quot;);
  
  // onkeyup event
  inputBox.onkeyup = ()=&gt;{
    let userEnteredValue = inputBox.value; //getting user entered value
    if(userEnteredValue.trim() != 0){ //if the user value isn't only spaces
      addBtn.classList.add(&quot;active&quot;); //active the add button
    }else{
      addBtn.classList.remove(&quot;active&quot;); //unactive the add button
    }
  }
  
  showTasks(); //calling showTask function
  
  addBtn.onclick = ()=&gt;{ //when user click on plus icon button
    let userEnteredValue = inputBox.value; //getting input field value
    let getLocalStorageData = localStorage.getItem(&quot;New Todo&quot;); //getting localstorage
    if(getLocalStorageData == null){ //if localstorage has no data
      listArray = []; //create a blank array
    }else{
      listArray = JSON.parse(getLocalStorageData);  //transforming json string into a js object
    }
    listArray.push(userEnteredValue); //pushing or adding new value in array
    localStorage.setItem(&quot;New Todo&quot;, JSON.stringify(listArray)); //transforming js object into a json string
    showTasks(); //calling showTask function
    addBtn.classList.remove(&quot;active&quot;); //unactive the add button once the task added
  }
  
  function showTasks(){
    let getLocalStorageData = localStorage.getItem(&quot;New Todo&quot;);
    if(getLocalStorageData == null){
      listArray = [];
    }else{
      listArray = JSON.parse(getLocalStorageData); 
    }
    const pendingTasksNumb = document.querySelector(&quot;.pendingTasks&quot;);
    pendingTasksNumb.textContent = listArray.length; //passing the array length in pendingtask
    if(listArray.length &gt; 0){ //if array length is greater than 0
      deleteAllBtn.classList.add(&quot;active&quot;); //active the delete button
    }else{
      deleteAllBtn.classList.remove(&quot;active&quot;); //unactive the delete button
    }
    let newLiTag = &quot;&quot;;
    listArray.forEach((element, index) =&gt; {
      newLiTag += `&lt;li&gt;${element}&lt;span class=&quot;icon&quot; onclick=&quot;deleteTask(${index})&quot;&gt;&lt;i class=&quot;fas fa-trash&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/li&gt;`;
    });
    todoList.innerHTML = newLiTag; //adding new li tag inside ul tag
    inputBox.value = &quot;&quot;; //once task added leave the input field blank
  }
  
  // delete task function
  function deleteTask(index){
    let getLocalStorageData = localStorage.getItem(&quot;New Todo&quot;);
    listArray = JSON.parse(getLocalStorageData);
    listArray.splice(index, 1); //delete or remove the li
    localStorage.setItem(&quot;New Todo&quot;, JSON.stringify(listArray));
    showTasks(); //call the showTasks function
  }
  
  // delete all tasks function
  deleteAllBtn.onclick = ()=&gt;{
    listArray = []; //empty the array
    localStorage.setItem(&quot;New Todo&quot;, JSON.stringify(listArray)); //set the item in localstorage
    showTasks(); //call the showTasks function
  }
  </code></pre>