title: how to save dynamically created elements to json using Javascript?
body: <p>I have a simple block which is created automatically by user, I want this element to be saved automatically after its created.</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;div class="main-container"&gt;
     &lt;ul class="menu-options"&gt;
        &lt;li id="btn-add-movie-block" class="menu-option"&gt;Add movie
      block
        &lt;/li&gt;
     &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript file</p>
  
  <pre><code>var jsonData =json.parse('{"movies:[]"}');
  
  function addMovieBlock() {
      var newMovie = $('&lt;div id="movie-block"&gt;New Movie&lt;/div&gt;');
      $(".main-container").append(newMovie);
  }    
  
  $("#btn-add-movie-block").on("click", function () {
      addMovieBlock();
  }
  
  &lt;ul class="menu-options"&gt;
      &lt;li id="btn-add-movie-block" class="menu-option"&gt;Add movie
          block&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I just want to save this block to the JSON data above? How can I achieve this using a simple method?</p>