How to create a popup when clicking the order button?

Question

I tried creating a popup and now it works and displays.

But my problem is I can't click and show every popup. It only works on the first menu button.

I want to When I want to click on a menu, a popup will show up for that menu. But I don't know what I need to do It can be like that.

This is a sample image that I need. I can do as in the picture. But can't click every button.

This is my code.

Template --> order.html

<div class="px-6 py-4">

  <div class="py-2 px-3 bg-yellow-100 text-black">
    <div class="relative flex">
        <div class="text-xl text-bold text-center">name</div>
    </div>
    <p class="p-2 leading-none">descriptions</p>
    <div class="relative mb-4 pb-2">
        <div class="absolute right-0">
            <button id="myBtn" class="bg-gray-300 text-black text-xs">
             order
            </button>
        </div>
    </div>
  </div>
</div>
<div id="myModal" class="show">

 <div class="show-content">
  <span class="close">&times;</span>
  <p class="p-6 text-black">
      Show menu info clicked
  </p>
 </div>

</div>

<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.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";
  }
}
</script>

Please advise me on what part I did wrong. Or what do I have to do?

Thank you very much.

Answer 1

This is not a python issue.

1. You cannot have multiple IDs.
2. You need to move the script outside the html that you are looping
3. Give the page an extra div and loop the html inside that div
4. Give the modal text container an ID
5. Delegate from the container - so all clicks in the container can be captured
6. Give the name element and the description element a class name to access it with

 // this will live in an external file you will load in the head of the page window.addEventListener("load", function() { document.getElementById("container").innerHTML += `<div id="myModal" class="hide"> <div class="show-content"> <span class="close">&times;</span> <p class="p-6 text-black" id="modalInfo"> Show menu info clicked </p> </div> </div>`; // OR make it part of the static content but then at the end of the container const myModal = document.getElementById("myModal"); document.getElementById("container").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("openModal")) { const orderDiv = tgt.closest(".orderDiv"); myModal.querySelector("#modalInfo").innerHTML = orderDiv.querySelector(".name").innerHTML + '<br/>' + orderDiv.querySelector(".desc").innerHTML; myModal.classList.toggle("hide"); } else if (tgt.classList.contains("close")) { myModal.classList.toggle("hide"); } }) })

 .hide { display: none }

 <div id="container"><!-- part of static --> <div class="px-6 py-4 orderDiv"> <div class="py-2 px-3 bg-yellow-100 text-black"> <div class="relative flex"> <div class="text-xl text-bold text-center name">Name 1</div> </div> <p class="p-2 leading-none desc">Description 1</p> <div class="relative mb-4 pb-2"> <div class="absolute right-0"> <button class="openModal bg-gray-300 text-black text-xs">order</button> </div> </div> </div> </div> <div class="px-6 py-4 orderDiv"> <div class="py-2 px-3 bg-yellow-100 text-black"> <div class="relative flex"> <div class="text-xl text-bold text-center name">Name 2</div> </div> <p class="p-2 leading-none desc">Description 2</p> <div class="relative mb-4 pb-2"> <div class="absolute right-0"> <button class="openModal bg-gray-300 text-black text-xs">order</button> </div> </div> </div> </div> </div><!-- part of static -->