title: How to append videos and its description from Json to DOM elements in javascript?
body: <p>I have a simple sidebar which I want to display multiple videos from json, for now, I want just to show title and video from json something like this below.</p>
  
  <p><a href="https://i.stack.imgur.com/GvDI7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GvDI7.png" alt="enter image description here"></a></p>
  
  <p>Here is what I have so far.</p>
  
  <pre><code>&lt;ul class="sidebar"&gt; 
    &lt;li&gt;
    &lt;h1 class="title"&gt;&lt;/h1&gt;
    &lt;video id="video_list" src=""&gt;&lt;/video&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is javascript</p>
  
  <pre><code>$(function() {
      var movies = [{
              "title": "travel",
              "left": 201,
              "top": 209,
              "movieid": "10",
              "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
              "buttons": [{
                  "left": 81,
                  "top": 51,
                  "start_time": 1,
                  "end_time": 2,
                  "buttonid": "10_1",
                  "btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
              }]
          },
          {
              "title": "ecommerce",
              "movieid": "20",
              "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
              "buttons": [{
                  "left": 0,
                  "top": 0,
                  "start_time": 1,
                  "end_time": 2,
                  "width": '200',
                  "height": '60',
                  "buttonid": "20_1",
              }]
          },
  
      ];
  
  
      function getVideoList() {
          var title = $('.title');
          var videoID = $('.video_list');
          $.each(movies, function(index, dataValue) {
              var movie_title = $("h1", {
                  value: dataValue.movieid
              }).html(dataValue.title).appendTo(title);
  
              var movie_video = $("#video_list", {
  
              }).html(dataValue.movie_url).appendTo(videoID);
          });
  
      }
  
      getVideoList();
  
  
  });
  </code></pre>
  
  <p>Here is jsfiffle: <a href="https://jsfiddle.net/n29y7j1L/20/" rel="nofollow noreferrer">live demo</a>
  I am able to display video titles for each movie but I am struggling to display both title and corresponding video as in json :(</p>
  
  <p>What am I supposed to change to get what I want???</p>