Using getElementById through with a php variable - php

Question

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">×</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;
?>

Answer 1

It is very poor practice to loop a script. Give the button and/or video a class and use the class to access it using ONE piece of script - that means you do not even need to give it an ID
This is overwriting ALL OTHER vars every time
var myVideo=document.getElementById('htmlVideo' + <?php echo $count?>);
Try this:
Give the parent container a class:
<div class="modalClickParent col-lg-4 col-md-6 mt-3 mt-lg-5">
and use something like
$(function() {
$("[data-toggle=modal]").on("click", function() {
const myVideo = $(this).closest(".modalClickParent").next().find("video").get(0);
if (!$(this).data("playing")) {
myVideo.play();
$(this).data("playing", true);
} else {
myVideo.pause();
$(this).data("playing", false);
}
});
});

Answer 2

Just create a class on which you want to click and give it a data-id attribute
In jquery section use code like
$('.class').click(function(){<bR>
var that=$(this);<bR>
var id=that.data('id');<bR>
//now do your stuff here like<bR>
$('#div'+id).modal('show');<bR>
});