How to can query woocommerce product in bootstrap modal?

Question

I've created a custom template then I've a query woocommerce product in that template using while() method. That's working fine. But I've added one bootstrap v3 modal in that query. That bootstrap modal using because if I have variable product and show Select Option for variation selection, then when user click 'select option', then, open bootstrap modal, I've successfully that work, but problem when open that modal show only one (latest) product, example: if I click select option for "Food one" then open modal and show latest last product, like "food one" but if I click "food two" then open modal and show same product in that modal like "food one". Note: I have added that modal in first while() method. You can check that problem on our live server/site https://www.theitaliankitchen.com.bd/m/

You can check this screenshots

I have clicked "Agnolotti alla Piemontese" product

then open modal

Then I've clicked "Mascarpone" Product

Then Open same product

But i want to show which product I've clicked show only that product information in modal.

Here is my full custom template codes

<?php 
/*
Template Name: Mobile Version
*/
get_header(); global $product;
$categorydesign = get_option( 'custom_category_options', array() );
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>


    <?php 
        /**
         * tokoo_before_main_content hook
         *
         * @hooked tokoo_wrapper_start - 10 (outputs opening divs for the content)
         */
        do_action( 'tokoo_before_main_content' );
     ?>

    <div class="shopmobile-version-area ">
        <div class="shop-mobile-version column ">
            <div class="msite-title-area fix">
                <h2><a href="<?php echo bloginfo('home'); ?>"><?php echo bloginfo('name'); ?></a></h2>
            </div>
            <!-- Category Design Area-->
            <div class="category-design-area fix">

                <?php

                if ( ! empty( $categorydesign['category_designgroup'] ) ) : 
                    foreach ( $categorydesign['category_designgroup'] as $catdesign ) : ?>
                    <?php 
                        $category_info = $catdesign['category_design_name'];
                        $cat_name = get_term_by('slug', $category_info, 'product_cat'); // get name by slug
                        $cat_link = get_term_link($cat_name->term_id); // get term link by id
                        $icon_link = $catdesign['category_design_icon'];
                ?>


                    <!--Single Category Item-->
                    <div class="single-category-item">
                        <a href="<?php echo $cat_link; ?>"><img src="<?php echo $icon_link;?>" alt="<?php echo $cat_name->name;?>"></a>
                        <h4> <a href="<?php echo $cat_link; ?>"><?php echo $cat_name->name;?></a> </h4>                    
                    </div><!--/ Single Category Item-->

                <?php endforeach; endif; ?>

            </div><!--/ Category Design Area-->

            <div class="mproduct-area fix">

            <?php 

                $mproduct = new WP_Query(array(
                        'post_type'     => 'product',
                        'posts_per_page'=> 10,                      
                ));
                if($mproduct->have_posts()) : while($mproduct->have_posts()) : $mproduct->the_post(); ?>

                <!--Single Product for Mobile Page-->
                <div class="msingle-product fix">
                    <div class="msingle-product-image">
                        <a href="<?php the_permalink(); ?>">
                        <?php if(has_post_thumbnail( get_the_ID())){

                             echo get_the_post_thumbnail( get_the_ID(), 'com_product_img' );
                        } else {
                            echo '<img src="' . woocommerce_placeholder_img_src() . '" alt="Placeholder" />';
                        }
                        ?></a>
                    </div>
                    <div class="mproduct-price">
                        <h2><strong>Price : </strong> <?php echo $product->get_price_html(); ?></h2>                        
                    </div>
                    <div class="mproduct-name">
                        <h2><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( $product->get_title() ) ?>"><?php echo esc_attr( $product->get_title() ) ?></a></h2>
                    </div>
                    <div class="mproduct-add-to-cart">
                        <?php woocommerce_template_loop_add_to_cart(); ?>   
                        <!-- Modal -->
                        <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
                          <div class="modal-dialog" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel"><?php the_title(); ?></h4>
                              </div>
                              <div class="modal-body">

                                <div class="msingle-product-image product_img_model">
                                    <a href="<?php the_permalink(); ?>">
                                    <?php if(has_post_thumbnail( get_the_ID())){

                                         echo get_the_post_thumbnail( get_the_ID(), 'com_product_img' );
                                    } else {
                                        echo '<img src="' . woocommerce_placeholder_img_src() . '" alt="Placeholder" />';
                                    }
                                    ?></a>
                                </div>

                                <div class="mproduct-price">
                                    <h2><strong>Price : </strong> <?php echo $product->get_price_html(); ?></h2>                        
                                </div>
                                <div class="product_variable_list">


                                <?php wc_get_template_part('content', 'single-product'); ?>


                                </div>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Continue Shipping</button>
                              </div>
                            </div>
                          </div>
                        </div>
                    </div>                  
                </div><!--/ Single Product for Mobile Page-->


            <?php endwhile; endif;?>
            </div>

        </div>
    </div>

    <?php 
        /**
         * tokoo_after_main_content hook
         *
         * @hooked tokoo_wrapper_end - 10 (outputs closing divs for the content)
         */
        do_action( 'tokoo_after_main_content' );
     ?>


<?php get_footer(); ?>

You can watch this video for good understanding https://youtu.be/6YbYrp3ALBg

Answer 1

changes this script in app.js file

<script>
    $('.shop-mobile-version').find('.msingle-product .button.product_type_variable.add_to_cart_button').on('click', function(){     

        $(this).next('.modal').modal().css('display', 'block');
        //$('#myModal').modal().css('display', 'block');

        return false;

    });
</script>