How to run 3 scripts in a specific order in a website and how to modify html code with Javascript/Jquery

THE CONTEXT

I want to make a simple website with 9 "boxes" (3x3), just like an Instagram profile, and distrubute the 9 most recent posts of a user throughout those boxes. I decided to do the scripts that get the posts with Python and Javascript, and the website with, of course, HTML and CSS.

I scrapped the HTML with Python, and removed the parts that didn't matter. Then, since the data I wanted was written in Javascript, I opened script.js and wrote the data there. Now in the script.js, I interpreted the data and got the media's url's. Small problem here, if the media is a video the url is a thumbnail. Given that, I opened index.js (Jquery) and found the mp4 url. Now all url's are, ordered by most recent, in an array.

NOTE: I am going to leave all the files that I used to avoid misunderstandings.

---

THE ISSUE

This are the HTML and CSS files: http://ift.tt/2x9N0kv

The instagram.py file:

# python2
import requests
from bs4 import BeautifulSoup
import os

page = requests.get("http://ift.tt/1N0ftv8")
html = BeautifulSoup(page.content, "html.parser")
script = html.find_all('script')[1].get_text()
script = str(script) + "\n\n"

def replace_line(file_name, line_num, text):
    lines = open(file_name, "r").readlines()
    lines[line_num] = text
    out = open(file_name, "w")
    out.writelines(lines)
    out.close()

replace_line("script.js", 1, script)

The script.js file:

// After running instagram.py, the object with the data will go here
// You can see an example here: http://ift.tt/2wGS5NS

nodes = window._sharedData.entry_data.ProfilePage[0].user.media.nodes; // [0]
almost_codes = [];
codes = [];

for (i = 0; i < (nodes.length); i++) {
  almost_codes.push(nodes[i]);
}

for (i = 0; i < (almost_codes.length); i++) {
  if (almost_codes[i].is_video === false) {
    codes.push("http://ift.tt/1BcZTF8" + almost_codes[i].code + "/media/?size=l");
  }

  else {
    codes.push("http://ift.tt/2wGLP9b" + almost_codes[i]["code"]);
  }
}

The index.js file:

var i;
var fcodes = [];
for (i = 0; i < (codes.length); i++) {
  if (String(codes[i])[(codes[i].length - 2)] != "=") {

    var myvideourl = codes[i];
    $.ajaxSetup({
        scriptCharset: "utf-8", //maybe "ISO-8859-1"
        contentType: "application/json; charset=utf-8"
    });

    $.getJSON('http://ift.tt/1nP8KaI' + encodeURIComponent(myvideourl) + '&callback=?', function(data) {

            var xx = data.contents;
            var dataindex = xx.search('<meta property="og:video" content=');
            var end = xx.indexOf('/>', dataindex);
            var yy = xx.slice(dataindex,end+2);
            var metaobject = $.parseHTML(yy);
            ucodes.push(String(metaobject[0].content));
    });

  }

  else {
        fcodes.push(String(codes[i]));
      }
}

Now, what I want to do is: go to the x "box" or div, go to the x element of the array with the url's, check if the element is a video or a picture. If is a picture, paste y into the html, otherwise paste w into the html. The posts should appear by the same order they appear in the Instagram profile. The scripts should also be executed one after another and not at the same time, like: run instagram.py, run script.js and run index.js

---

THE QUESTION

How can I past the code of the 1st element of the array in the 1st div, the 2nd element in the 2nd div, and so on? And how can I run 3 scripts in a specific order?