We Keep Coding

I have problem with Modal Box for webstore

I plan to open a game server and currently programming a store. What I want is a basic popup window (modal box) when a player click "purchase" it is gonna open a window where its says details and 3 buttons (Pay with paypal, pay with card , pay with wallet (Login required)). The only problem is that when I try to open a window for 1 item its shows some text (im doing for test now) but when I add other item its not poping out. I tried to fix it but its just not working and servers open in 3 weeks and that is only thing I need it. If any additional code is require I will provide to you. ALSO my point is to make few buttons to 1 popup with diffrent information (according to name(NAZWA), price(CENA) , desciption(OPIS))
MY CODE:
echo "<div class='usg'>";
echo "<p class='usg1'><img src='{$usg['img']}' width='75px; height: 75px;'</img></p> <br><br><br>";
echo "<p class='usg2'>".$usg['nazwa']."</p>";
echo "<p class='usg3'>".$usg['opis']."</p>";
echo "<p class='usg4'>".$usg['cena']."</p>";
echo "<button class='myBtn'>KUP</button>";
echo "</div>";
}
}
$conn->close();
?>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn")[0-1];
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

Show variable on a modal from mysql

So I am trying to make a modal windows where you can see an URL. That URL is stored in a mysql database. I am generating a table with all the data from that table and some hyperlinks, one of then should be that modal window. By far I have this, but its only showing the empty modal window.
PHP main page:
echo "<td><a href='#' id='myBtn'>Url</a></td>";
<div id="myModal" class="modal">
<?php
include('url.php');
?>
</div>
PHP modal page:
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Send to:</h2>
</div>
<div class="modal-body">
<p>URL</p>
</div>
</div>
Javascript
var modal = document.getElementById('myModal');
var a = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
a.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I was wondering how can I make it, as I dont know how to pass data from my hyperlink to the modal or if I should make a modal for each id.

Multiple Modal Boxes overwritten

I have a problem of a simple yet confusing matter. I have two modal boxes with two separate Id's in my page. It's a simple registration and login ones. Thinking behind it was that if I use the same code yet change the id to target them individually would make things work the way I wish them to would do the job yet whenever I modify the content it appears to be identical in both of them. I have a little suspicion of where things are going wrong yet I need some guidance. Please help a girl out.
HTML
<!-- The Modal 1-->
<div id="myModal" class="modal">
<!-- Modal content 1 -->
<div class="modal-content">
<span class="close">×</span>
<p>Registration FORM WILL GO HERE..</p>
</div>
</div>
<!-- The Modal 2-->
<div id="myModal2" class="modal">
<!-- Modal content 2 -->
<div class="modal-content">
<span class="close">×</span>
<p>LOGIN FORM WILL GO HERE..</p>
</div>
</div>
SCRIPT
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
// Get the modal
var modal = document.getElementById('myModal2');
// Get the button that opens the modal
var btn = document.getElementById("myBtnn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

Modal Popup with Video, Keeps Playing Audio after Closed

I made a pop-up video button on my website.
But when i close it, or click on a modal-out space, the audio still continues.
How can i solve this problem?
I tried some javascript function, but i think im doing something wrong...
Thanks!
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
<button type="button" class="button" id="myBtn">Watch Video</button>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
</div>
<div class="modal-body">
<iframe width="560" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen></iframe>
</div>
<div class="modal-footer">
</div>
</div>
</div>

Well the easiest way for you is to re-assign the iframe video src value so that it resets itself and stops. E.g. Assign your iframe an id of example id="yplayer" and then use the following statement where you want to stop and reload the video.
document.getElementById('yplayer').src = document.getElementById('yplayer').src;
The second option is to use the youtube api functions which will involve a little more code handling. Youtube API Docs
Hope this helps.

You should check out the documentation for html audio/video on https://www.w3schools.com/tags/av_met_pause.asp
I suggest you change
span.onclick = function() {
modal.style.display = "none";
}
with the following code
span.onclick = function stopVideo() {
document.getElementById('video').pause();
}

Subscribe Confirmation Required?

I want to make a video site. Where Users can play video. But the problem is when users want to play video they need to subscribe my youtube channel then they can play videos. I made a modal when users click on play video the modal will ask to subscribe my channel. Now i need that when users subscribe my channel they will redirect to the video page and they can play the videos.
Anyone can help me about it...
html code is here
<h2>Bottom Modal</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<h2>Verify By Subscribing Us</h2>
<button onclick="myFunction()">Subscribe</button><br><br>
</div>
<div class="modal-footer">
<input type="submit" value="Confirm Subscription" class="confirm">
</div>
</div>
</div>
The modal js code is here
// Get the modalM
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("confirm")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function myFunction() {
var myWindow = window.open("https://www.youtube.com/channel/UCODLiqqTQZcQxiBLNeeFqDw?sub_confirmation=1", "MsgWindow", "width=600,height=800");
}