Why is the conclusion repeated?

Question

CMS

The problem is this.
Created a theme for WordPress
Started making a gallery for it
First, albums are displayed on the main page.
Then, when you click in the modal window, all the photos appear
. And then just when you click on the photo, the Fancybox modal opens and that's it.
But the problem is that
in the cycle of displaying records, the cover and the name of the record are normally displayed
. But in the modal window, the title of the record and album photos are shown only for the last record
HELP
Here is the code:

<section id="photos_s">
  <div class="section_title">
    <h2><?php echo get_cat_name(2) ?></h2><br>
    <div class="md_line bg_main_color"></div>
  </div>

  <div class="container">
    <div class="row">
    <?php if (have_posts()) : query_posts('cat=2');
        while (have_posts()) : the_post(); ?>
      <div class="col-md-4 p0">
        <div data-toggle="modal" data-target="#myModal">
          <?php the_post_thumbnail(array(100,100));  ?>
          <?php the_title(); ?>
        </div>
      </div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"><?php the_title(); ?></h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
        	<div class="row">
        		<?php the_content(); ?>
        	</div>
        </div>
      </div>
    </div>
  </div>
</div>
<?php endwhile; endif; wp_reset_query(); ?>


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

Answer 1

<div data-toggle="modal" data-target="#myModal">
          <?php the_post_thumbnail(array(100,100));  ?>
          <?php the_title(); ?>
        </div>

Here you indicate that the data-target, that is, the target popup for display, is a popup with id="myModal".
And here you output god knows how many elements with id="myModal" inside the loop

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"><?php the_title(); ?></h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
        	<div class="row">
        		<?php the_content(); ?>
        	</div>
        </div>
      </div>
    </div>
  </div>
</div>

Given that the id parameter must be unique per page, it shouldn't work at all. And so you see, your script finds the last popup in the list with a given ID and displays it.
Generate a unique ID for each post, like this:

<div data-toggle="modal" data-target="#myModal<?php the_ID(); ?>">
................................
<div class="modal fade" id="myModal<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">