JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row">
            <div class="col-sm-3"><img src="" id="img1" class="img-rounded" width="100%" height="200px"></div>
            <div class="col-sm-3"><img src="" id="img2" class="img-rounded" width="100%" height="200px"></div>
            <div class="col-sm-3"><img src="" id="img3" class="img-rounded" width="100%" height="200px"></div>
            <div class="col-sm-3"><img src="" id="img4" class="img-rounded" width="100%" height="200px"></div>
        </div>
        <div class="row">
            <div class="col-sm-3"><img src="" id="img5" class="img-rounded" width="100%" height="200px"></div>
            <div class="col-sm-3"><img src="" id="img6" class="img-rounded" width="100%" height="200px"></div>
            <div class="col-sm-3"><img src="" id="img7" class="img-rounded" width="100%" height="200px"></div>
            <div class="col-sm-3"><img src="" id="img8" class="img-rounded" width="100%" height="200px"></div>
        </div>

JavaScript

// dom is ready to be manipulated
$(document).ready(function() {
  // create an array of our video ids
  var ids = [
    "169971394",
    "169657641",
    "169569693",
    "169569661",
    "169569619",
    "169569539",
    "169569509",
    "169566439"
  ];
  // initialize an empty array that will eventually hold our videos
  var videos = [];
  // loop through our array of ids
  ids.forEach(function(id, i) {
    // because these are in order, ids[0] should be in #img1 etc
    var image = '#img' + (i + 1);
    
    // get your video url --not actually used in this code
    var vimeoVideoUrl = 'https://player.vimeo.com/video/' + id;
    
    // create an object that holds the information for this video that can
    // be gathered *synchronously*
    var v = {
      id: id,
      image: '#img' + (i + 1),
      video: vimeoVideoUrl
    };
    
    // add this object to our initially empty array
    videos.push(v);
    
    /* after the loop ends, videos array might look like this
    
    [
     {
       id: "169971394",
       image: "#img1",
       video: "https://player.vimeo.com/video/169971394"
     },
     {
       ... next video
     } ... for each video
    ]
    
    */
    // do our ajax operation to get the rest of the video information
    $.getJSON(
      'https://www.vimeo.com/api/v2/video/' + id + '.json?callback=?', {
        format: "json"
      },
      // REMEMBER -- this function is *asynchronous* and we can't trust the
      // value of the increment from our loop, so this is relatively complex
      function(data) {
        // get the id of the returned video
        var id = data[0].id;
        
        // get the thumbnail
        var thumb = data[0].thumbnail_large;
        
        // loop through our videos array
        videos.forEach(function(v, i) {
          // find the element of the array with the id that was just returned
          if (v.id == id) {
            // and add the thumbnail url to the object
            videos[i].thumbnail...