Fire custom JS function more than once?

Question

My issue is when I try to fire SocialAPI(...) several times on one page it will only fire the first event and won't complete the other requests. I don't understand how this is - I'm relatively new to learning this language and I'm a little stuck here.

I've tried to test each call I'm using on their own and they each work, it only seems to return one and ignore the other requests.

The function accesses the API running on my server to access multiple social media APIs (not sure if this is relevant).

I've checked the log and their is no error in the code.

Thank you for any help in advance.

For example

index.html (some page)

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

<script>
    $(document).ready(function() {
        SocialAPI("div1", "twitter", "uid");
        SocialAPI("div2", "facebook", "uid");
        SocialAPI("div3", "instagram", "uid");
    });
</script>

SocialAPI() Function Shortened

function SocialAPI(target, platform, uid, mode) {
    if(!target) {target="";} else { target = "#" + target}
    if(!platform) {platform="";}
    ...so on for each...

    var APIBase = "https://api.domain.com/?platform=" + platform + "&uid=" + uid + "&mode=" + mode;

    if(platform == "instagram") {
    $.ajax({
      url: APIBase,
      dataType: "json",
      success: function(r) {
          $(target).html(r.data.counts.followed_by);
      }
        });
    } else if(platform == "twitter") {
    ...so on for diff platforms...
    }
  } else {
    return false;
  }
}

Answer 1

Try

function loadSocial(){
    SocialAPI("div1", "twitter", "uid");
    SocialAPI("div2", "facebook", "uid");
    SocialAPI("div3", "instagram", "uid");
}

Then update:

$(document).ready(function() {
    loadSocial();
});

Hit enter too soon, Add the following to the first line of your SocialAPI function:

console.log("Platform", platform);