I am using this jquery script within a php to add a unique id onto each looping modal.

thing is everything works perfectly well except I can't get why the `$count` for `var myVideo=document.getElementById('htmlVideo' + <?php echo $count?>);` returns a at say 6 all the time

So lets say I were to click on videoBtn1, #videoModal1 will open up with the right video but myVideo will return me the video from #htmlVideo6.
regardless if I were to click on videoBtn1 or videoBtn10, myVideo is always pointing at #htmlVideo6

```
<?php  
  $count = 0;
  while ( have_rows('video') ) : the_row(); ?>
    <div class="col-lg-4 col-md-6 mt-3 mt-lg-5">
      <div class="d-flex flex-column h-100 px-3">
        <div data-toggle="modal" data-target="#videoModal<?php echo $count?>" id="videoBtn<?php echo $count?>">
           <img src="<?php echo get_sub_field('video_thumbnail') ?> " width="100%" style="height: 240px;object-fit: cover;">
        </div>

        <div class="py-3 h-100 d-flex flex-column align-items-start">
          <h4 class="text-heavy">
            <?php echo get_sub_field('title') ?>
          </h4>
          <p>
              <?php echo get_sub_field('content') ?>
          </p>
        </div>

      </div>
    </div>
    <!--Video Modal -->
    <div class="modal fade" id="videoModal<?php echo $count?>" role="dialog" aria-labelledby="videoModal<?php echo $count?>Label" aria-hidden="true" >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-body p-3 position-relative">

            <div type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" class="text-white">&times;</span>
            </div>
            <video id="htmlVideo<?php echo $count?>" width="100%" controls style="z-index:5">
              <source src="<?php echo get_sub_field('video')?>" type="video/mp4">
            </video>

            <script>
              var container = $("#htmlVideo<?php echo $count?>");
                var myVideo=document.getElementById('htmlVideo' + <?php echo $count?>);
              $(document).ready(function(){
                $("#videoBtn<?php echo $count?>").click(function(){
                  console.log(myVideo);
                  myVideo.play();
                });
                $("#videoModal<?php echo $count?>").click(function(e) 
                {
                  // if the target of the click isn't the container nor a descendant of the container
                  if (!container.is(e.target) && container.has(e.target).length === 0) 
                  {
                    myVideo.pause();
                  }
                });
              });
            </script>
          </div>
        </div>
      </div>
    </div>
<?php
  $count++;
  endwhile;    
?>

```