JQUERY and AJAX Pagination and Calling Data - php

Question

I am facing the following problem, I have a page of products with ajax pagination where users is able to select products in a form, the selected products save their id values in an array, but my problem is when the user goes to page 2 then he go back to page 1 he is able to choose the same product where I need to be the array ids unique, where user is able to select only the product 1 time even if he goes to page 2 or 3 and come back to previous pages
my ajax code:
$(".pageNumber").on("click",function(){
pageID = this.id;
var data_string = 'pageID='+pageID;
$.ajax({
type: "POST",
url: "loadData.php",
data: { "pageId" : pageID, "catid" : catid, "subid" : subid, "filter" : filter, "view" : view_type , "items" : itemArrayList},
cache: false,
success: function (result) {
$(".pageNumber").removeClass("number-page-active");
$("#"+pageID).addClass("number-page-active");
$("#results1").hide();
$("#results").html(result);
console.log(result);
if ($(".number-page-active").attr('id') == 1) {
$('#sub1').attr("style","display:none") ;
}
if ($(".number-page-active").attr('id') != 1) {
$('#sub1').attr("style","display:block") ;
}
if ($(".number-page-active").attr('id') == <?php echo $pageLast ?>) {
$('#add1').attr("style","display:none") ;
}
if ($(".number-page-active").attr('id') != <?php echo $pageLast ?>) {
$('#add1').attr("style","display:block") ;
}
}
});
The list of selected products are saved in array as follow:
$("#quotationSubmit").on("click",function(){
console.log(itemArrayList);
$("#itemListArray").val(itemArrayList);
});
var itemSelected = 0;
itemArrayList = [];
function image(divId) {
if (itemSelected < 0) {
itemSelected = 0;
}
var idDiv = 1;
for (idDiv; idDiv <= 100; idDiv++) {
var divDivId = "" + idDiv;
var divDivId0 = "" + idDiv;
if (divDivId === divId || divDivId0 === divId) {
break;
}
}
if ($("#quotation-form").css("display") === "block") {
if ($("#" + idDiv).hasClass("selected-div") === true || $("#" +
idDiv).hasClass("selected-div")) {
$("#" + idDiv).removeClass("selected-div");
$("#" + idDiv).removeClass("selected-div");
itemSelected--;
index = $.inArray(divId,itemArrayList);
itemArrayList.splice(index,1);
console.log(itemArrayList);
} else {
$("#" + idDiv).addClass("selected-div");
$("#" + idDiv).addClass("selected-div");
itemSelected++;
itemArrayList.push(divId);
console.log(itemArrayList);
}
if (itemSelected === 0) {
document.getElementById("quotationText").innerHTML = "Please Select an item";
} else {
if (itemSelected === 1) {
document.getElementById("quotationText").innerHTML = "You have 1 item Selected";
} else {
document.getElementById("quotationText").innerHTML = "You have " + itemSelected + " items Selected";
}
}
} else {
var imageMe = $("#" + divId).find('img').attr('src');
document.getElementById('image00').src = imageMe;
setTimeout(function () {
$(".modal-for-image").removeClass("left-modal-image");
}, 100);
}
}