Instagram Embed Not Working After Initial Call

Question

So I have a table where you can select different posts (which are buttons) which will open up an iFrame in a side panel with the selected user's embedded post.

For Twitter everything works completely fine but for Instagram anything after the first embedded post does not show the normal embedding. The username, date posted, follow button, likes button, and comment button are all missing. Also, the photo is replaced with a grayed out Instagram logo. The only thing present is the caption. The only way to fix this is to refresh the page and then I will be able to load any Instagram post but the behavior continues after the initial post.

Here are the JS code snippets of the calls being made:

if (postObj['instagram']) {
    var iFrameSizeIG = 400; // Must be AT LEAST 320
    $.ajax({
        type: "GET",
        url: "http://api.instagram.com/oembed?url=" + postObj.url + "&maxwidth=" + iFrameSizeIG,
        crossDomain: true,
        headers: { 'Access-Control-Allow-Methods': 'GET, POST, PUT' },
        async: true,
        dataType: "jsonp",
        success: function (data) {
            console.log("Loading Instagram post in iframe: " + postObj.url);
            $("#post-body").append($('<div>').addClass("post-view").append(
                $('<div>', { "style": "padding-top: 10px;"})
                    .append($('<span>').addClass('bold').text("User Post: "))
                    .append(data.html)))
        },
        error: function () {
            alert("Error Occured");
        }
    });
}

if (postObj['twitter']) {
    $.ajax({
        type: "GET",
        url: "https://api.twitter.com/1/statuses/oembed.json?url=" + postObj.url,
        crossDomain: true,
        headers: { 'Access-Control-Allow-Methods': 'GET, POST, PUT' },
        async: true,
        dataType: "jsonp",
        success: function (data) {
            console.log("Loading Twitter post in iframe: " + postObj.url);
            $("#post-body").append($('<div>').addClass("post-view").append(
                $('<div>', { "style": "padding-top: 10px;"})
                    .append($('<span>').addClass('bold').text("User Tweet: "))
                    .append(data.html)))
        },
        error: function () {
            alert("Error Occured");
        }
    });
}

I am not sure if this is a known issue or how to fix. I have tested in both Firefox and Chrome and it persists in both browsers.