WordPress Custom Post Type and Bootstrap Modal

I am using Advanced Custom Posts and Custom Post Types plugin for my WP site.

How can I make a custom post show on the Bootstrap modal depending on the trigger button? I want it to show inside the modal’s .modal-body. I found a solution somewhere here but it requires putting the modal syntax inside the while loop and every time there’s a new custom post, the modal syntax is repeated which is not nice.

I am still a newbie and studying AJAX / JSON request but can’t get it to work. I think it’s the best way to do it. From what I know I need to create a separate PHP file but not sure what to code inside.

Can someone please provide an example? I’m stuck for almost a week. Thanks a lot in advance!

Here’s my code:

<div class="row">

  <?php $sample_query = new WP_Query( array( 
    'post_type' => 'sample',
    'category_name' => 'trending',
    'orderby' => 'rand'
  ) ); ?>

  <?php while( $sample_query->have_posts() ) : $sample_query->the_post(); ?>

  <?php
    $sample_logo = get_field('sample_logo');
    $sample_body = get_field('sample_body');
  ?>

  <div class="col-md-3">
    <div class="trending-sample">
      <div class="thumbnail">
        <a href="#">
          <img src="<?php echo $sample_logo[url]; ?>" alt="<?php echo $sample_logo[alt]; ?>">
        </a>
        <div class="caption">
          <h3><?php the_title(); ?></h3>
          <p><?php echo $sample_body; ?></p>
          <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Open Modal</button>
        </div>
      </div>
    </div>              
  </div>            

  <?php endwhile; ?>        

</div>

My Modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">                             
      <div class="modal-body">

        <h3><?php the_title(); ?></h3>                  
        <img src="<?php echo $sample_logo[url]; ?>" alt="<?php echo $sample_logo[alt]; ?>">                 
        <p class="sample-desc"><?php echo $sample_body; ?></p>

        <hr class="dashed">

        <p class="lead">Sample Text</p>
        <p class="modal-share">
          <strong>Share:</strong>
            <span class="sharefb"><a href="#"><i class="fa fa-facebook"></i></a></span>
            <span class="sharetwitter"><a href="#"><i class="fa fa-twitter"></i></a></span>
            <span class="sharegplus"><a href="#"><i class="fa fa-google-plus"></i></a></span>
            <span class="sharemail"><a href="#"><i class="fa fa-envelope-o"></i></a></span>
            <button type="button" class="btn btn-danger pull-right" data-dismiss="modal"><strong>Close</strong></button>
         </p>

      </div>
    </div>
  </div>
</div>