Why doesn't the content inside the pop up window change?

Question

PHP

Can you please tell me why the content outside the pop up window changes, but not inside it?

<?php foreach ($arr as $row): ?>											
            <div class="col-md-4">
              <div class="post">

                <a class="post-img" data-toggle="modal" data-target="#exampleModalCenter"><img src="./userimages/<?php echo $row['photo']; ?>" alt=""></a>
                <div class="post-body">
                  <div class="post-meta">
                    <?php if ($row['category'] == 'izo'): ?>
                      <a class="post-category cat-1" href="">Рисование</a>
                    <?php endif; ?>
                    <?php if ($row['category'] == 'mod'): ?>
                      <a class="post-category cat-1" href="">Лепка и Моделирование</a>
                    <?php endif; ?>
                    <?php if ($row['category'] == 'shit'): ?>
                      <a class="post-category cat-1" href="">Шитье и Вязание</a>
                    <?php endif; ?>
                    <?php if ($row['category'] == 'pod'): ?>
                      <a class="post-category cat-1" href="">Поделки</a>
                    <?php endif; ?>
                    <span class="post-date"><?php echo $row['user_name']; ?></span>
                  </div>
                  <h3 class="post-title"><a href=""><?php echo $row['article']; ?></a></h3>
                </div>
              </div>
            </div>
            <!-- Modal -->
              <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content">
                    <div class="row">
                    	<div class="col-12 col-md-6">
                    		<img src="./userimages/<?php echo $row['photo']; ?>" alt="" style="max-height: 500px;">
                    	</div>
                    	<div class="col-12 col-md-6">
                    		<div class="description2" style="text-align: center;padding: 20px;">
                    			<div class="name" style="font-size: 25px;"><?php echo $row['user_name']; ?></div>
                    			<div class="article" style="font-size: 17px;font-weight: 550;color: rgba(0,0,0,0.4);margin-top: 10px;"><?php echo $row['article']; ?></div>
                    			<div class="about" style="font-size: 15px;margin-top: 20px;"><?php echo $row['description']; ?></div>
                    		</div>
                    	</div>
                    </div>
                  </div>
                </div>
              </div>
          <?php endforeach; ?>

Answer 1

Because you are creating a bunch of modal windows with the same id in a loop. And the browser, realizing that id is a unique element, detects only one window - the first one. Accordingly, your content changes, but each time the same modal window is displayed.