How do i pass multiple Variables to a modal

So I have succeeded in passing the variables from one modal to another.The problem is they are multiple variables and I am looping them with the PHP foreach function, all the items are displayed but when I click on any item only the first variable is passed and not the specific one I chose. How do I fix this here is the code for the initial modal

  <div class="modal fade bs-modal-md" id="cardmodal" tabindex="-1" role="dialog" aria- 
  labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-md">
   <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLongTitle">SELECT A CARD</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
     </div>
   
     <div class="modal-body">


                
                    <div class="mini-carousel">
                     <ul class="mini-item">
             <?php
    $cards = $card->load_category('WOMEN','WR');
    $category_products=$cards['category_products'];
    $num_rows = count($category_products); 
     if ($num_rows < 1) {
    echo '<div class="info">We shall update you when this is back in Stock</div>'; 
    ?>
        <a  onClick="pageModel(this);" href="javascript:void(0);" id="<?php echo 
      site_url('home/getview/contact_form/'.$categorynameID);  ?>" >Click here to submit your 
            contact to be updated</a>

      <?php    
    
       } else {

        
      foreach($category_products as $cp)
    {
    $status = $cp["status"];
    $product_quantity = $cp["quantity"];
    $notify_quantity = $cp["reorder_level"];
     $images = $this->home_m->get_product_images($cp['inventory_id'],true);     
    if($images){
           $image = $images[0];
      $image_name = $image["thumb"].'.'. $image["extension"];
        $image_source = $image['source'];
      $check_pic = DEFAULT_UPLOAD.'/'.$image_source.'/'.$image_name;
         $product_image = $image_name;
    }else{
     $product_image = '';
     }
        
        ?>

                <li class="product-item col-xs-12 col-sm-4 col-md-3"> 
                        <div class="product-inner">
                    <div class="product-thumb has-back-image zoom">
                <a  id="testd" data-id="<?php echo base_url($check_pic); ?>" data- 
      dismiss="modal" data-toggle="modal" onclick="addModalDetails()" href="#single_card_view">
     <? php
     if(($product_image != "") || (($product_image != NULL))) {

       if (file_exists($check_pic)) {  ?>
      <img id="cardimage" src="<?php echo base_url($check_pic); ?>"  alt="Product Image" ></img>
                                   
                                  
       <?php    } else {
          echo "<img class="img-fluid" 
        src="http://geestar.co.tz/images/category/product.png" alt="Product Image" />";
        }

      } else {
      echo "<img class="img-fluid" src="http://geestar.co.tz/images/category/product.png" 
     alt="Product Image" />";
      }

        ?>
       </a>
     </div>
       <div class="product-info">
                            <h6 id="cardname" class="product-name"><?=$cp["product_name"];?></a> 
   </h6>
                            <span class="price">
                                <ins id="cardprice">TZS <?=number_format($cp["selling_price"]);? 
              >
             </ins>
                            </span>

                        
                        </div>                    
     </div>
        </li>
                <?php
           }
      }
       ?>   

this is the JS Code where i pass the values to the other modal

    function addModalDetails(){
     var name = $('#cardname').html();
  var image= $('#cardimage').html();
   var price =$('#cardprice').html();
   $('#heading').html(name);
   $('#cost').html(price);
    var imgsrc = $('#testd').data('id');
   $('#picture').attr('src',imgsrc);
    }

And this is the code of the modal where i want the data to be passed

 <div class="modal fade product_view" id="single_card_view">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon 
           glyphicon-remove"></span></a>
            <h3 id="heading" class="modal-title"></h3>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-6 product_img">
                    <img id="picture" src="" class="img-responsive">
                </div>
                <div class="col-md-6 product_content">
                   
                  
                    <p> <input id="gift_message" class="form-control" rows="5" placeholder="<? 
      php _l('Gift Message'); ?>" name="gift_message" > </input></p>
                    <h3 id="cost" class="cost"></span>TZS 
                <? =number_format($cp["selling_price"]);?></h3>
                    <div class="row">
              
                        <!-- end col -->
                    
                        <!-- end col -->
                  
                        <!-- end col -->
                    </div>
                    <div class="space-ten"></div>
                    <div class="btn-ground">
                        <button type="button" class="button" data-dismiss="modal" 
     onClick="addCardDetails()"> Add Card</button>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Answer

You’re currently using a foreach loop to assign the same ID to multiple html tags. For simplicity of this answer, I will be taking your <img> tag with the ID cardimage as example. Furthermore I’d like to note that your ID’s should always be unique!

The problem

<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>

Every team you’re looping through the $category_products array, you’re adding another one of those tags, identical to the last one.

For example if you loop 3 times through the $category_products array, you will get 3 times the same ID.

<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>
<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>
<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>

When there are multiple identical ID’s on a webpage, your javascript will pick the first one it can find, and run your script on that, as it only expects one result. To fix this, you should make all your ID’s unique.

A possible solution

First of all, make all of your ID attributes unique. In your loop you’re looping through $category_products as $cp, and you appearantly have the variable $cp['inventory_id']. I’ll be taking that as unique id for this answer for now.

You could append this unique ID behind your ID like this:

foreach($category_products as $cp) { ?>
    <img id="cardimage-<?=$cp['inventory_id']?>" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>
<?php }

Then change your addModalDetails() like this:

function addModalDetails(id){
     var name = $('#cardname-'+id).html();
  var image= $('#cardimage-'+id).html();
   var price =$('#cardprice-'+id).html();
   $('#heading-'+id).html(name);
   $('#cost-'+id).html(price);
    var imgsrc = $('#testd-'+id).data('id');
   $('#picture-'+id).attr('src',imgsrc);
}

and call it like this:

addModalDetails(<?=$cp['inventory_id']?>);