title: How to save dynamically created elements in local storage
body: <p>I have this program that can make collapsibles with content dynamically. I'm trying to save the collapsibles created in local storage. I was able to successfully save a users input in local storage, but ran into a road block when I tried to save elements with the same classname in local storage. I tried something like this:</p>
  <pre><code>   var collapsibles = document.getElementsByClassName('collapsible');
  
      function populateStorage() {
        localStorage.setItem('collapsibles', document.getElementsByClassName('collapsible'));
        setStyles();
      }
  
      function setStyles() {
        var collapsibles = localStorage.getItem('collapsibles');
        document.getElementById(&quot;myCollapsibles&quot;).innerHTML = collapsibles;
      }
  
      collapsibles.onchange = populateStorage;
  </code></pre>
  <p>But it didn't work, Is it possible to save dynamically created elements in local storage?</p>
  <p><strong>Code Snippet of Program (excluding local storage snippet):</strong></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 currentClosable;
  var currentContent;
  function selectedColl() {
      document.getElementById("inputTaskDiv").style.display = "block";
      currentClosable = event.target;
      currentContent = currentClosable.nextElementSibling;
      var inputTaskDiv = document.getElementById("inputTaskDiv");
      $(currentContent).append(inputTaskDiv);
  }
  
  var taskCounter = 0;
  function addTask() {
      var text = document.getElementById("taskInput").value;
      // create a new div element and give it a unique id
      var newTask = $("&lt;div class='currentTask'&gt;&lt;input class='checkbox' type='checkbox'&gt;&lt;label&gt;" + text + "&lt;/label&gt;&lt;/div&gt;");
      newTask.id = 'temp' + taskCounter;
      taskCounter++
      // and give it some content
      var newContent = document.createTextNode(text);
  
      $(currentContent).append(newTask); 
      console.log("appended");
  
  
    $(".currentTask").hover(
      function() {
        var taskCur = event.target;
        $( this ).find( "a" ).last().remove();
      $(taskCur).append( $( "&lt;a class='taskX'&gt; x&lt;/a&gt;" ) );
      
      function dump() {
        $(taskCur).remove();
        
      }
      $( "a" ).on( "click", dump );
  
      }, function() {
      $( this ).find( "a" ).last().remove();
     });
    document.getElementById("taskInput").value = " ";
  }
  
  var elementCounter = 0;
  var elementCounterContent = 0;
  var text;
  function addElement() {
      text = document.getElementById("input").value;
      // create a new div element and give it a unique id
  
      var newDiv = $("&lt;button class='collapsible' onclick='selectedColl()'&gt;&lt;/button&gt;").text(text);
      $(newDiv).append("&lt;button class='btnDelete'&gt;Delete&lt;/button&gt;");
      var newContentOfDiv = $("&lt;div class='content'&gt;&lt;/div&gt;");
  
      newDiv.id = 'temp' + elementCounter;
      newContentOfDiv.id = 'content' + elementCounterContent;
  
      newDiv.classList = "div";
      elementCounter++
      elementCounterContent++
      // and give it some content
      var newContent = document.createTextNode(text);
  
      // add the newly created element and its content into the DOM
  
      document.getElementById("input").value = " ";
      $("#divColl").append(newDiv, newContentOfDiv);
  
      newDiv.click(function () {
          this.classList.toggle("active");
          content = this.nextElementSibling;
          if (content.style.display === 'block') {
              content.style.display = 'none';
          } else {
              content.style.display = 'block';
          }
      });
  }
  
  
  $("#divColl").on('click', '.btnDelete', function () {
        $(this).closest('.collapsible').remove();
        content.style.display = 'none';
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.collapsible {
      background-color: #777;
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
  }
  
  .active,
  .collapsible:hover {
      background-color: #555;
  }
  
  .collapsible:after {
      content: '\002B';
      color: white;
      font-weight: bold;
      float: right;
      margin-left: 5px;
  }
  
  .active:after {
      content: "\2212";
  }
  
  .content {
      padding: 0 18px;
      transition: max-height 0.2s ease-out;
      background-color: #f1f1f1;
  }
  
  .taskX{
    color:red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><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;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      
  
      &lt;!---Add Step ---&gt;
      &lt;div id="addSteps"&gt;
       &lt;p&gt;Make a collapsible:&lt;/p&gt;
       &lt;input id="input" type="text" placeholder="title for collapsible"&gt;&lt;button onclick="addElement()"&gt;Make&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;!-- Add tasks to steps ---&gt;
      &lt;div id="addTasksToSteps" style="display:none"&gt;
      &lt;div id="inputTaskDiv" style="display:none"&gt;
       &lt;input id="taskInput" type="text"&gt;&lt;button onclick="addTask()"&gt;Add Task&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Final ---&gt;
      &lt;div id="scheduleDiv" style="display:none"&gt;
      &lt;/div&gt; 
  
         &lt;div id="divColl"&gt;&lt;/div&gt;   
  
         &lt;header&gt;&lt;/header&gt;
  
        &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>