JQUERY和AJAX分页和调用数据

Question

我面临以下问题，我有一个带有ajax分页的产品页面，用户可以在表单中选择产品，所选产品将他们的id值保存在数组中，但问题是当用户访问时第2页然后他回到第1页他能够选择我需要的阵列ID唯一的相同产品，即使他去第2页或第3页并且回来，用户也只能选择产品1次到前几页

我的ajax代码：

$(".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") ;
        }   

        }
    });

所选产品列表保存在数组中，如下所示：

    $("#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);
        }
    }