code not working on server but working on localhost - jquery-ui

Question

Here I am using a code for getting pictures of user and his friends from facebook via app the code is working properly in localhost but not in server. Here is the whole functionality which i want:
on a button click get the user info from facebook data
show popup with drop down
display pictures of the user 1st album
display pictures of the frnds on selection
onclick of any image , the selected image should be displayed in next div
All the above functionalities are achieved on localhost and server but the 1st album images are not displayed properly and on click of any image is also not working
// chk for login of user
function Login(y) {
picidgen = y;
FB.login(function (response) {
if (response.authResponse) {
getUserInfo();//get user info
sbsfbdemo();// open popup
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {
scope: 'email,user_photos,user_videos,read_friendlists,friends_photos',
});
}
function getUserInfo() {
FB.api('/me?fields=name,albums,photos,friends', function (response) {
var str = " Select Friends " + "<select name='frndlst2' onchange='frndsalbum()' id='frndlst2'>"
str += "<option value='" + response.id + "'selected ='selected'>" + "me" + "</option>";
for (i = 0; i < response.friends.data.length; i++)
str += "<option value='" + response.friends.data[i].id + "'>" + response.friends.data[i].name + "</option>"
str += "</select>"
str += " Select Album " + "<select name='frndlst1' onchange='getfrndsphotos()' id='frndlst1'>"
for (x = 0; x < response.albums.data.length; x++)
str += "<option value='" + response.albums.data[x].id + "'>" + response.albums.data[x].name + "</option>"
str += "</select>";
document.getElementById("status").innerHTML = str;
picid = response.albums.data[0].id;
var c = response.albums.data[0].count;
FB.api('/' + picid + '/photos?limit=400&offset=0', function (photos) {
if (photos && photos.data && photos.data.length) {
for (var j = 0; j < c; j++) {
var photo = photos.data[j];
// photo.picture contain the link to picture
var image = document.createElement('img');
image.style.border = "1px solid black";
image.style.margin = "10px";
image.style.cursor = "pointer";
image.src = photo.picture; //user photo is displayed in div(named picture)
picsrc["a" + j] = photo.source;
image.className = "a";
image.id = "a" + j;
document.getElementById("picture").appendChild(image);
}
}
$(".a").bind("click", function () {
var photo = $(this).attr("id");
imagecrop = picsrc[photo];
$("#big-pic").find("img").attr("src", picsrc[photo]);// onclick of image it should be displayed in 2nd div(named big-pic)
});
});
});
}
function frndsalbum() {
document.getElementById("frndlst1").options.length = 0;
var f2 = document.getElementById("frndlst2");
ffrr = f2.options[f2.selectedIndex].value;
FB.api('/' + ffrr + '?fields=albums', function (response) {
var f1 = document.getElementById("frndlst1");
for (var i = 0; i < response.albums.data.length; i++) {
var album = response.albums.data[i];
var option = document.createElement('option');
option.text = album.name;
option.value = album.id;
f1.appendChild(option);
}
document.getElementById("picture").innerHTML = "";
var picid = response.albums.data[0].id;
var c = response.albums.data[0].count; //1st album lenth
FB.api('/' + picid + '/photos?limit=400&offset=0', function (photos) {
if (photos && photos.data && photos.data.length) {
for (var j = 0; j < c; j++) {
var photo = photos.data[j];
// photo.picture contain the link to picture
var image = document.createElement('img');
image.style.border = "1px solid black";
image.style.margin = "10px";
image.style.cursor = "pointer";
image.src = photo.picture;
picsrc["a" + j] = photo.source;
image.className = "a";
image.id = "a" + j;
document.getElementById("picture").appendChild(image);
}
}
$(".a").bind("click", function () {
var photo = $(this).attr("id");
imagecrop = picsrc[photo];
$("#big-pic").find("img").attr("src", picsrc[photo]);
});
});
});
}
function getfrndsphotos() {
document.getElementById("picture").innerHTML = "";
var f1 = document.getElementById("frndlst1");
ffr = f1.options[f1.selectedIndex].value;
FB.api('/' + ffr + '/photos?limit=400&offset=0', function (photos) {
if (photos && photos.data && photos.data.length) {
for (var j = 0; j < photos.data.length; j++) {
var photo = photos.data[j];
// photo.picture contain the link to picture
var image = document.createElement('img');
image.style.border = "1px solid black";
image.style.margin = "10px";
image.style.cursor = "pointer";
image.src = photo.picture;
picsrc["a" + j] = photo.source;
image.className = "a";
image.id = "a" + j;
document.getElementById("picture").appendChild(image);
}
}
$(".a").bind("click", function () {
var photo = $(this).attr("id");
imagecrop = picsrc[photo];
$("#big-pic").find("img").attr("src", picsrc[photo]);
});
});
}