javascript - jquery add html to element of different page using ajax

one text

I have a shopping cart SINGLE PAGE app where I have a products.php page where I can add items to cart and a cart.php page which shows all the products I have chosen . When I click on "Add to cart " on a product in products.php I store the product as a cookie using ajax and then unsuccesfully try to append it as html in an element in the cart.php page . So the problem is that I cannot append the data I got using ajax to an element in a different page .

My code :

When you click "add to cart" button in products.php jquery is invoked

$('.category__center').on('click' , '.product__btn' ,(e)=>{
    //get name image src price store name 
    var title = $(e.target).closest(".product").find("h2").text();
    var store =  $(e.target).closest(".product").find("h5").text();
    var price =  $(e.target).closest(".product").find("h4").text();
    var pic = $(e.target).closest(".product").find('img').attr('src');
    var id =  $(e.target).closest(".product").find('.prodID').text();
  
    var code = (`itemCode`+`${id}`).replace(' ' ,'');
    if(checkCookie(code)==false){ //if cookie exists 
      alert('Item already added to cart ');
    }else{
      createCookie(title,store,price,pic,id); //create the cookie
      $.ajax({
        url:'addToCart.php',
        type:'POST',
        data: {cookie:document.cookie},
        success : (html)=>{
          //console.log(html); returns the html perfectly 
          //THE PROBLEM IS HERE HTML IS NOT APPENDED TO DIFFERENT PAGE 
          $("#cartItems").append(html); //this is an element of a different page 
          alert("added"); //works
        },
        error : (xhr)=>{
          alert(xhr);
        }

      });
      
    }
    
  }); 

addToCart.php returns the cookies displayed as html

<?php 

  if(isset($_COOKIE)){
    $count = 0;
    foreach($_COOKIE as $i){
      $count++;
      if($count ==1 ){
        continue;
      }
      $product = json_decode($i,true);
      echo "
        <tr>
          <td class ='product__thumbnail'>
            <img src = ".$product["image"]." />
          </td>
          <td class='product__name'>
            <h3> ".$product["called"]." </h3>
          <small>".$product["soldAt"]."</small>
          </td>
          <td class='product__price'>
            <div class='price'>
              <span class='new__price'>".$product["costs"]."</span>
            </div>
          </td>
          <td class='product__quantity'>
            <div class='input-counter'>
                <div>
                    <span class='minus-btn'>
                        <svg>
                            <use xlink:href='../images/sprite.svg#icon-minus'></use>
                        </svg>
                    </span>
                    <input type='text' min='1' value='1' max='10' class='counter-btn'>
                    <span class='plus-btn'>
                        <svg>
                            <use xlink:href='../images/sprite.svg#icon-plus'></use>
                        </svg>
                    </span>
                </div>
            </div>
          </td>
      
        </tr>
      ";
      exit();
    }
  }else{
    echo "<h1> No products have been added.  </h1>";
    exit();
  }


?> 

I could just display all my cookies in cart.php by appending the addCart.php code inside the selected element but I would have to reload each time since I have a single page app . I would appreciate your help .