title: Bootstrap Modal in a While Loop
body: <p>I'm using Advanced Custom Fields plugin with Wordpress and Bootstrap for style.</p>
  
  <p>I'm having problems with a while loop to show some custom posts.
  Just the <strong>first</strong> post content modal-body "</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php the_field('desc_completa_aula'); ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>" is showing. I want show all modal-bodies separate, only when click each one.</p>
  
  <p>I tried clean the jquery but no sucess. Could you guys help me?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;?php
  
              // args
              $args = array(
                  'posts_per_page' =&gt; 10,
                  'post_type' =&gt; 'post',
                  'category_name' =&gt; 'aula-avulsa',
                  'orderby' =&gt; 'date',
                  'order' =&gt; 'DESC'
              );
  
  
              // query
              $the_query = new WP_Query($args);
  
              ?&gt;
              &lt;?php if ($the_query-&gt;have_posts()): ?&gt;
  
                  &lt;div class="row" style="text-align: center;"&gt;
                      &lt;?php while ($the_query-&gt;have_posts()) : $the_query-&gt;the_post(); ?&gt;
                          &lt;div class="col-lg-4 col-md-4 col-xs-6"&gt;
                              &lt;p class="subtitle-lession"&gt;&lt;?php the_field('aula_ou_curso'); ?&gt;&lt;/p&gt;
                              &lt;h1 class="w-blog-entry-title-h" style=""&gt;&lt;?php the_field('titulo_aula'); ?&gt;&lt;/h1&gt;
                              &lt;p&gt;&lt;strong&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt; Data&lt;/strong&gt;&lt;br/&gt; &lt;?php the_field('data_aula'); ?&gt;&lt;/p&gt;
                              &lt;p&gt;&lt;strong&gt;&lt;i class="fa fa-clock-o"&gt;&lt;/i&gt; Horário&lt;/strong&gt;&lt;br/&gt; &lt;?php the_field('horário_aula'); ?&gt;&lt;/p&gt;
                              &lt;p class="description-lession"&gt;&lt;strong&gt;&lt;i class="fa fa-pencil-square-o"&gt;&lt;/i&gt; Descrição&lt;/strong&gt;&lt;br/&gt;
                                  &lt;?php the_field('desc_pequena_aula'); ?&gt;
                              &lt;/p&gt;
  
                              &lt;a href="#contato"&gt;
                                  &lt;button class="btn-lession"&gt;Fazer Inscrição&lt;/button&gt;
                              &lt;/a&gt;
  
                              &lt;!-- Button trigger modal --&gt;
                              &lt;button type="button" class="btn-lession-info" data-toggle="modal" data-target="#myModal" title="&lt;?php the_field('desc_completa_aula'); ?&gt;"&gt;
                                  Saiba mais
                              &lt;/button&gt;
  
                              &lt;!-- Modal --&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 the_field('titulo_aula'); ?&gt;&lt;/h4&gt;
                                          &lt;/div&gt;
                                          &lt;div class="modal-body"&gt;
                                                  &lt;p style="color: #000"&gt; &lt;?php the_field('desc_completa_aula'); ?&gt;&lt;/p&gt;
                                          &lt;/div&gt;
                                          &lt;div class="modal-footer"&gt;
                                              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;?php endwhile; ?&gt;
                  &lt;/div&gt;
              &lt;?php endif; ?&gt;
  
              &lt;?php wp_reset_query();     // Restore global post data stomped by the_post(). ?&gt;
  </code></pre>
  
  
  
  <p>I was using this javascript code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('.modal').on('hidden.bs.modal', function(e)
      { 
          $(this).removeData();
      }) ;
  });
  &lt;/script&gt; </code></pre>
  </div>
  </div>
  </p>