Pulling in two list using javascript - sharepoint 2013

Question

I am using javascript to pull in list information and display it. I need to pull in another list from another site collection. Both lists have to show up on the same page, each it there own sections. I've tried changing the function names, changing all the variable names but all to no avail. Only one list shows. Could someone please point me in the right direction? My code is below:

var siteUrl = '/sites/HR';

SP.SOD.executeFunc('SP.js', 'SP.ClientContext', function()
{
var _ctx = SP.ClientContext.get_current();
});

function retrieveListItems() {

var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('News');

console.log(oList);

var camlQuery = new SP.CamlQuery();

console.log(camlQuery);

camlQuery.set_viewXml('<View><Query><OrderBy><FieldRef Name=\'ID\'/ Ascending=\'FALSE\'/ /></OrderBy><Where><Geq><FieldRef Name=\'ID\'/><Value Type=\'Number\'/>2</Value></Geq></Where><RowLimit>4</RowLimit></Query></View>');
this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this,  this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

 }

function onQuerySucceeded(sender, args) {

var listItemInfo = '';

console.log(collListItem);

var listItemEnumerator = collListItem.getEnumerator();
console.log(listItemEnumerator);

var i = 0;

while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    var story_count = i++;

    var story_id = oListItem.get_id();
    var story_fname = oListItem.get_item('FirstName');
    var story_lname = oListItem.get_item('LastName');
    var story_job_title = oListItem.get_item('Title1');
    var story_excerpt_pre = oListItem.get_item('Challenge');
    var story_excerpt = story_excerpt_pre.substring(0, 100);
    var story_title = oListItem.get_item('ol_Department');
    var story_location = oListItem.get_item('Story_x0020_Location');
    var story_image_pre = oListItem.get_item('Story_x0020_Image');

    var attachment = oListItem.get_attachmentFiles();
    var sitePull = new SP.ClientContext.get_current();
    var web = sitePull.get_web();
    var attachmentFolder = web.getFolderByServerRelativeUrl('Lists/News/Attachments/'+story_id);
    var attachmentFiles = attachmentFolder.get_files();

    console.log(attachmentFiles);

    $('<div id="story_'+story_id+'" class="story_item" style="width:48%;display:inline-block;vertical-align:top;"><div id="'+story_count+'" class="story_contents" style="padding-right: 14px;margin-right: 10px; margin-bottom: 0px;   "><div class="story_image" style="width:100%;"></div><a href="#?news_index='+story_count+'" style="display:block;"><h2 style="margin-bottom:0px;color:#000;margin-top:0px;font-weight:700;line-height:1;font-size:16px;">'+story_job_title+'</h2></a><p style="margin-bottom:15px;font-size:16px;line-height:1;margin-top:5px;color:#000;">'+story_location+'</p><p style="font-size:16px;color:#666;line-height:1.3;">'+story_excerpt+'...</p></div></div></div>').appendTo('#stories_wrap');


  }
  }
 function onQueryFailed(sender, args) {
 console.log('Request failed. ' + args.get_message() + '\n' +    args.get_stackTrace());
  }


</script>
<style>
.stories_wrap p, .stories_wrap span {
font-size:16px !important;
font-family:tahoma, sans-serif !important;
margin-bottom: 0px;
}
.stories_container{
position:relative;
}

 </style>

 <div class="stories_container">
 <div id="stories_wrap" class="stories_wrap"></div></br>
 <a href="#" style="display:inline-block;padding:10px 20px 10px 24px;color:#000;font-weight:700;border:1px solid #000;background:#fff;text-align:left;float:right;position: relative;">View All News</a>
 </div>

 </script>

I am trying to add a list called "News 2017". Tried using:

var siteUrl = '/';
var oList2 = clientContext.get_web().get_lists().getByTitle('News 2017');

I also tried adding a additional while loop and separating the code into another file, then placing both codes into different script embed files. It didn't work.

Answer 1

_spBodyOnLoadFunctionNames.push("initiationMethod");

var siteUrl = '/sites/site',    
    _ctx1,
    _ctx2;

function initiationMethod()
{
    SP.SOD.executeFunc('SP.js', 'SP.ClientContext', callMethods);
}

function callMethods()
{
    GetCurrentSiteContent();
    GetSubsiteContent();
}

function GetCurrentSiteContent()
{
    _ctx1 = SP.ClientContext.get_current();

    //load your list and camlQuery and listcollection

    _ctx1.executeQueryAsync(Function.createDelegate(this,  this.onQuerySucceeded1), Function.createDelegate(this, this.onQueryFailed));
}

function GetSubsiteContent()
{
    _ctx2 = new SP.ClientContext(siteUrl);

    //load your list and camlQuery and listcollection

    _ctx1.executeQueryAsync(Function.createDelegate(this,  this.onQuerySucceeded2), Function.createDelegate(this, this.onQueryFailed));
}


function onQuerySucceeded1(sender, args) {
    //perform your operation
}

function onQuerySucceeded2(sender, args) {
    //perform your operation
}

function onQueryFailed(sender, args) {
    //perform your operation
}

Keep variables name unique for retrieving data from these lists from different site collections.