JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  The 2 images below should <b>NOT</b> match<br>
  if they are, its because Instagram is not honoring "max_id" for public users
</p>
<p>
Url 1: <a id='url1' target="_blank"></a><br>
</p>
<p>
Url 2: <a id='url2' target="_blank"></a><br>
</p>

<div class="container">
  <img id="img1">
  <img id="img2" >
</div>

SCSS

.container {
   img {
     display: block;
     width: 45%;
     float: left;
   } 
   overflow:hidden;
 }

JavaScript

var urlPrefix = 'https://www.instagram.com/therock/';
var apiUrl = urlPrefix+'?__a=1';
$('#url1').attr('href', apiUrl).text(apiUrl);

function updatepage(id, src) {
	$('#img'+id).attr('src', src);
}

/**********************************************************
	Public User section
*/
function getFirstImg(json) {
	return json.graphql.user.edge_owner_to_timeline_media.edges[1].node.display_url;
}
function getCursor(json) {
	return json.graphql.user.edge_owner_to_timeline_media.page_info.end_cursor;
}

function makeNextReqeust(end_cursor) {
	var maxIDUrl = urlPrefix+'?__a=1&max_id='+end_cursor
  $('#url2').attr('href', maxIDUrl).text(maxIDUrl);
  
  $.getJSON(maxIDUrl, function(json){ 
    var img = getFirstImg(json);
    updatepage(2, img);
	})
}

$.getJSON(apiUrl, function(json){ 
  var img = getFirstImg(json);
  updatepage(1, img);
  var end_cursor = getCursor(json);
  $('#cursor').text('end_cursor='+end_cursor);
	makeNextReqeust(end_cursor);
})