Bootstrap 4 modal with while loop (woocommerce)

[esu]

im trying to get woocommerce products in bootstrap 4 modal, im getting all required information in bootstrap modal body but when i click on modal button, bootstrap modal doesnt opens.

<?php  
            $args = array(
            'post_type'             => 'product',   
            'posts_per_page'        => 6,
            'post_status'           => 'publish',
            'taxonomy' => 'product_cat',
            'hide_empty' => true,
            'exclude'    => 29,
            'parent'   => 0
            );
            
            $loop = new WP_Query( $args );

            while ( $loop->have_posts() ) : $loop->the_post();
                global $product;
                $id = $product->get_id();
        ?>  

<!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="<?php echo $id; ?>">
        Launch <?php echo $product->get_id(); ?>
    </button>
 <!-- Button trigger modal -->

<div class="modal fade" id="<?php echo $id; ?>" tabindex="-1" 
role="dialog" aria-labelledby="<?php echo $id; ?>Label" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
              <?php echo $product->get_id(); ?> 
            <h5 class="modal-title" id="<?php echo $id; ?>Label"><?php echo get_the_title(); ?></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p id="name"><?php echo get_the_title(); ?></p> 
                    <p id="description"><?php echo $product->get_short_description(); ?></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <?php
        endwhile;
        wp_reset_query();
    ?>  

how make bootstrap 4 modal work when click on modal button popup is shown

[DaveMaxwell]

It looks like you’re trying to open the bootstrap modal, passing an id to it. Am I reading your intent correctly?

If so, that’s not how the modals work in bootstrap. The data-target attribute points to an id on the modal. So unless you have a modal for each id (and you shouldn’t), that’s not what you want. Look at the Varying modal content in the modal documentation. That’s the approach you want to use.