title: How do I assign individual youtube images from an array to a div that is also dynamic
body: <p>This block is dynamically being pulled in in Visual Basic.</p>
  
  <pre><code>foreach (Helper.Webinar webinar in ViewBag.Webinars){
  &lt;a href="@Url.Action("Webinars", "Learning", new { name = webinar.ContentFileName })" class="link-block"&gt;
      &lt;div class="jumbotron left-right-jumbotron-block webinar-block"&gt;
      &lt;div class="webinar-item-1"&gt;&lt;/div&gt;
      &lt;div class="webinar-item-2"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/a&gt;
  }
  </code></pre>
  
  <p>I'm trying to assign individual ID's tp the above using. As it stands, I can populate each of the above with the very last image in the array. I'm trying to figure out how to populate every block based on the number of ID's I have in the array.</p>
  
  <pre><code>const youtubeImgSort = () =&gt; {
  const ids = [
  
      "", // leave blank
      "LJ3opnisLmk",
      "zTqLkVurK-A",
      "9PDexf_6HH0", 
      "wMmXGNmrr7I" 
  ];
  
  $(".webinar-item-1").empty().append('&lt;div class="vid-state"&gt;&lt;img class="webThumb" alt="Webinar Preview Thumbnail"/&gt;&lt;/div&gt;');
  
  for (let i = 0; i &lt; ids.length; i++) {
  
      $('.webThumb').attr('src', 'https://img.youtube.com/vi/' + ids[i] + '/0.jpg').after('&lt;i class="fa fa-clock-o"&gt;&lt;/i&gt;');
      };
  
  };
  
  youtubeImgSort();
  </code></pre>