title: How do I make this loop print the values I need?
body: <p>I'm rather new to Javascript, so please excuse simple mistakes if I made any. I need to make a task board page. The user inputs a value (a task and a date) and JS saves it into an object. The object is pushed into an array and saved to Local Storage. After that, it fades in a note (did this with an image and CSS effects) and prints the value on top of it. To accomplish this I tried using a For loop to go through the array when I get it back from local storage, but it only keeps printing the first value the user entered. </p>
  
  <p>This is my code:</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>var taskArray = [];
  var imgs = document.getElementsByTagName("img");
  $(document).ready(function hideImages() {
    $("img").hide();
  })
  
  function saveToLocalStorage() {
    //debugger;
    var taskName = document.getElementById("task").value;
    var taskDate = document.getElementById("date").value;
  
    var task = {
      name: taskName,
      date: taskDate
    }
  
  
    taskArray.push(task);
    var arrayToString = JSON.stringify(taskArray);
    localStorage.setItem("user tasks", arrayToString);
    var mainDiv = document.getElementById("maindiv");
    var arrayFromStorage = localStorage.getItem('user tasks');
    arrayFromStorage = JSON.parse(arrayFromStorage);
    for (let index = 0; index &lt; arrayFromStorage.length; index++) {
      mainDiv.innerHTML += `
           &lt;span class="relative"&gt;
           &lt;img src="../assets/images/notebg.png" class="fade-in start imgSpacing" alt=""&gt;
           &lt;span class="centerOnNote" id="textspan"&gt;
           Your task = ${arrayFromStorage[x].name}
           Complete by = ${arrayFromStorage[x].date}
           &lt;/span&gt;
           `
      x++
      addText();
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body class="background-image"&gt;
    &lt;h1 class="pageheader"&gt;My Task Board&lt;/h1&gt;
    &lt;form class="" action="index.html" method="post"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;input type="text" class="form-control col-sm centerInput" id="task" placeholder="Enter a Task"&gt;
          &lt;input type="date" class="form-control col-sm centerInput" id="date" value=""&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;input type="button" class="form-control btn btn-success" id="submit" value="Submit Task" onclick="saveToLocalStorage()"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;input type="reset" class="form-control btn btn-success " id="reset" value="Reset Form"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
    &lt;div class="imgContainer" id="maindiv"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="scripts.js"&gt;&lt;/script&gt;
      &lt;!-- load the script at the end of body tag --&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be greatly appreciated, cheers!</p>