كيفية حقن العنصر بعد الانتقال الى صفحة اخرى HTML / jquery

السلام عليكم ..

اريد حقن بعض العناصر عند الانتقال الى صفحة اخرى عن طريق الخاصية append في jquery لكن لايحدث ذلك ويتم تجاهل الخاصية append ..

ما احاول فعله هو عند الضغط على منتج معين اقوم بجلب بيانات هذا المنتج من قاعدة البيانات ثم اقوم بنقل المستخدم الى صفحة اخرى و اقوم بحقن بيانات هذا المنتج الذي تم النقر عليه في الصفحة لكن لايحدث ذلك  ..

HTML : الصفحة التي عن طريقها سيتم الانتقال الى صفحة اخرى

<div class="col-xs-6 col-lg-3 col-6 gy-3 product" data-product-id="...">
    <a href="/product-page" class="text-dark show-product">
    <div class="card">
        <img src="..." class="card-img-top">
        <div class="card-body" dir="rtl">
            <h5 class="card-title">test</h5>
            <span class="card-text text-decoration-line-through" style="color: #5c585885;"> 
            99 </span>
            <span class="current-price">99</span>
            <span class="currency">ر.س</span>
            <a class="add-to-cart text-light">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                    class="bi bi-cart3 d-none d-lg-block" viewBox="0 0 16 16">
                    <path
                        d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                </svg>
                اضافة للسلة</a>
        </div>
    </div>
    </a>
</div>

HTML : الصفحة التي اريد حقن العناصر بها 

<div class="container mt-5" dir="rtl">
    <div class="row" id="pro-info">
        
    </div>
</div>

js :

$(document).on('click', '.show-product', function() {

  var product = $(this);
  var currentProduct = product.parents('.product');
  var productId = currentProduct[0].dataset.productId;

  $.ajax({
    type: 'POST',
    url: `${serverAddress}/product/getProduct`,
    data: {productId:productId},
    success: (product) => {
      var showPro = `
      <div class="col-6">
      <p> test </p>
      </div>
`
$('.pro-info').append(showPro)

      
    },
    error: (err) => {

    }
  })
})