title: Integrating Modal Function with Custom Post Type
body: <p>I'm attempting to build out a grid of "capabilities" for a client who would like to have each tile open its own modal to show additional information.</p>
  
  <p>This is what I have so far:</p>
  
  <p>A custom post type called "capability"</p>
  
  <p>Two ACF fields assigned to the "capability" post type ('main_photo', 'modal_copy')</p>
  
  <p>This is the problem I'm running into:</p>
  
  <p>Each of the grid images and titles from the custom post type = 'capability' are displaying perfectly and look great, as is the modal itself. The content of the modal is displaying from the first post for all posts. In other words, the title and copy assigned to the first post in the list is showing up the same for the remaining 11 posts.</p>
  
  <p>Here is my code in its current state:</p>
  
  <pre><code>&lt;section class="capability clearfix"&gt;
  
            &lt;?php
            // For creating multiple, customized loops.
            // http://codex.wordpress.org/Class_Reference/WP_Query
  
            $custom_query = new WP_Query( array( 'post_type' =&gt; 'capability','posts_per_page' =&gt; '-1', 'orderby' =&gt; 'title', 'order' =&gt; 'ASC' ));
  
            while($custom_query-&gt;have_posts()) : $custom_query-&gt;the_post(); ?&gt;
  
              &lt;article &lt;?php post_class(); ?&gt; id="post-&lt;?php the_ID(); ?&gt;"&gt;
  
                &lt;div class="inner"&gt;                    
  
                    &lt;div class="imagecontainer"&gt;
  
                      &lt;img title="check us out" data-toggle="modal" data-target="#myModal"                                       
  
                         &lt;?php
  
                          $image = get_field('main_photo');
  
                            if( $image ): ?&gt; 
                              onmouseout="src='&lt;?php echo $image['url']; ?&gt;'" alt="&lt;?php echo $image['alt']; ?&gt;" title="&lt;?php echo $image['alt']; ?&gt;';"                                 
                              src="&lt;?php echo $image['url']; ?&gt;" alt="&lt;?php echo $image['alt']; ?&gt;" title="&lt;?php echo $image['alt']; ?&gt;"
  
                             &lt;?php endif; ?&gt;
  
                           /&gt;
  
                      &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
  
                        &lt;div class="modal-dialog" role="document"&gt;
  
                          &lt;div class="modal-content"&gt;
  
                            &lt;div class="modal-header"&gt;
  
                              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
  
                              &lt;h4 class="modal-title" id="myModalLabel"&gt;&lt;?php echo the_title(); ?&gt;&lt;/h4&gt;
  
                            &lt;/div&gt;
  
                            &lt;div class="modal-body"&gt;
  
                              &lt;?php
  
                                $copy = get_field('modal_copy');
  
                                if( $copy ): ?&gt; 
  
                                &lt;p&gt;&lt;?php echo $copy; ?&gt;&lt;/p&gt;
  
                             &lt;?php endif; ?&gt;
  
                            &lt;/div&gt;                                 
  
                          &lt;/div&gt;
  
                        &lt;/div&gt;
  
                      &lt;/div&gt;
  
                    &lt;/div&gt;
  
                  &lt;div class="entry-summary"&gt;
  
                    &lt;h2 class="entry-title"&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;
  
                    &lt;?php echo the_excerpt(); ?&gt;
  
                  &lt;/div&gt;
  
                  &lt;?php //the_content(); ?&gt;
  
                &lt;/div&gt;
  
              &lt;/article&gt;
  
            &lt;?php endwhile; ?&gt;
  
            &lt;?php wp_reset_postdata(); // reset the query ?&gt;
  
          &lt;/section&gt;
  </code></pre>
  
  <p>And here is the link to the grid I'm working on: <a href="http://eightsevencentral.com/corporate-program/" rel="nofollow noreferrer">http://eightsevencentral.com/corporate-program/</a></p>
  
  <p>I know the solution must be painfully obvious, but I've been struggling with this for a couple days now and figured it was about time to reach out to the community.</p>
  
  <p>Please let me know if I haven't included a bit of vital information to help dissect the issue. This is my first time posting to SO, so I may have left something out. </p>
  
  <p>Thanks!</p>