title: how to add query string parameter to same URL when on click a href link
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//script to show magnific popup
  &lt;script&gt;
    $('.gallery-lb').each(function() { // the containers for all your galleries
     $(this).magnificPopup({
            delegate: 'a', // the selector for gallery item
            type: 'image',
            gallery: {
             enabled:true
            },
            mainClass: 'mfp-fade'
        });
    });
                  
  &lt;/script&gt;
  
  //script to show popup
  (function ($) {
  [ Show modal1 ]*/
      $('.js-show-modal1').on('click',function(e){
          e.preventDefault();
          $('.js-modal1').addClass('show-modal1'); 
      });
  
      $('.js-hide-modal1').on('click',function(){
          $('.js-modal1').removeClass('show-modal1');
      });
  })(jQuery);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  //Quick View link at index.php page 
  if(count($product) &gt; 0)
  {
     foreach ($product as $products){
     echo'
  &lt;a href="?qid='.$products['Product_ID'].'" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1"&gt;Quick View                                                             &lt;/a&gt;
  ';}?&gt;
  
  &lt;!-- Display product details on magnific modal popup --&gt;
   &lt;div class="wrap-modal1 js-modal1 p-t-60 p-b-20"&gt;
    &lt;div class="overlay-modal1 js-hide-modal1"&gt;&lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
      &lt;div class="slick3 gallery-lb"&gt;                                                                       
         &lt;?php                                                               
         //check if query string exist in URL                                                                           
         if(isset($_GET['qid']) &amp;&amp; !empty($_GET['qid'])){
         //get selected product details from database and display at magnific modal popup
         
         $selectedproduct =$app-&gt;getProductDetails($_GET['qid']);
         
         if(count($selectedproduct) &gt; 0){
         foreach ($selectedproduct as $productdetail){
         echo '
         &lt;div class="item-slick3" data-thumb="'.$productdetail['Product_Image'].'"&gt;
         &lt;div class="wrap-pic-w pos-relative"&gt;
         &lt;img src="'.$productdetail['Product_Image'].'" alt="IMG-PRODUCT"&gt;
         &lt;a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="'.$productdetail['Product_Image'].'"&gt;                                                                           &lt;i class="fa fa-expand"&gt;&lt;/i&gt;&lt;/a&gt;
         &lt;/div&gt;
         &lt;/div&gt;
         
         &lt;div class="item-slick3" data-thumb="'.$productdetail['Product_Detail_Image01'].'"&gt;
         &lt;div class="wrap-pic-w pos-relative"&gt;
         &lt;img src="'.$productdetail['Product_Detail_Image01'].'" alt="IMG-PRODUCT"&gt;
         &lt;a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="'.$productdetail['Product_Detail_Image01'].'"&gt;&lt;i class="fa fa-expand"&gt;&lt;/i&gt;&lt;/a&gt;
         &lt;/div&gt;
         &lt;/div&gt;
         
         &lt;div class="item-slick3" data-thumb="'.$productdetail['Product_Detail_Image02'].'"&gt;
         &lt;div class="wrap-pic-w pos-relative"&gt;
         &lt;img src="'.$productdetail['Product_Detail_Image02'].'" alt="IMG-PRODUCT"&gt;
         &lt;a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="'.$productdetail['Product_Detail_Image02'].'"&gt;
         &lt;i class="fa fa-expand"&gt;&lt;/i&gt;&lt;/a&gt;
         &lt;/div&gt;
         &lt;/div&gt;';
         }
         }
         }?&gt;
         &lt;/div&gt;
         &lt;/div&gt;
         &lt;/div&gt;
         &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I wanted to created an ecommerce site that displays product details in a lightbox popup when user clicks on a "Quick View" link of a particular product. However, I'm unable to do so as the query string that is appended on the product "Quick View" link is not shown on the index URL when the onclick action is performed. Hence, lightbox display empty result after clicking on the product link.</p>
  
  <p>Product Quick View URL looks something like this: <a href="http://localhost/index.php?qid=(some" rel="nofollow noreferrer">http://localhost/index.php?qid=(some</a> product ID). </p>
  
  <p>I am using magnific popup source code to display lightbox.</p>
  
  <p>Expected result: Upon clicking the product quick view link, a lightbox will popup to show product details of the selected product in the index URL page. </p>
  
  <p>How can I add query string to the index URL when onclick a href link so that appropriate product details can be fetch from database based on the query string qid (aka product id) and displayed at lightbox. Would appreciate someone to help me with this. :)</p>