Try to get a javascript function in a php foreach loop to work

I recently had a question answered regarding creating 2 pop up boxes using some simple javascript. I have attached the demo of the answer below. I am a novice PHP developer who has just started to learn JS. My question is this..

The code below is for a forum. 'ask a question' creates a pop up where a question can be asked - this part of the code is fine. The questions are pulled from my database using a simple PHP foreach loop and for each question, I need an 'edit' button with each question that creates the pop up 'edit question'. The demo below works for editing one question (the first) but it doesn't for subsequent questions. I know this is probably a simple thing, relating to how the function is called etc but despite finding 'solutions' online I can't get anything to work. I am accustomed to being able to call function in PHP anytime I want and as many times as I want. Clearly this isn't the case with my JS as it is written here. Could someone give me some advice?

HTML

<button id="AskQuestion">Ask question</button>
<button id="EditQuestion">Edit question</button>

<div id="overlay"></div>

<div id="popup">
<h2>Question?</h2>
<button id="CloseBtn">Close</button>
</div>

<div id="popupEdit">
<h2>Edit Question</h2>
<button id="CloseEditBtn">Close</button>
</div>

CSS

#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
display: none;
}

#popup, #popupEdit {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -200px;
width: 400px;
height: 300px;
display: none;
background: #EEE;
}

javascript

     window.onload = function () {
     document.getElementById("AskQuestion").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "block";
     popup.style.display = "block";
     };

     document.getElementById("CloseBtn").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "none";
     popup.style.display = "none";
     };

     document.getElementById("EditQuestion").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popupEdit = document.getElementById("popupEdit");
     overlay.style.display = "block";
     popupEdit.style.display = "block";
     };

     document.getElementById("CloseEditBtn").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popupEdit = document.getElementById("popupEdit");
     overlay.style.display = "none";
     popupEdit.style.display = "none";
   };
  };

I hope this is clear....and appreciate any help. These days I seem to be turning to Stackoverflow everyday.....eek

DEMO http://jsfiddle.net/nRfC2/

---

I have tried this.....

JS

  window.onload = function () {
 document.getElementById("AskQuestion").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "block";
     popup.style.display = "block";
   };

 document.getElementById("CloseBtn").onclick = function () {
     var overlay = document.getElementById("overlay");
     var popup = document.getElementById("popup");
     overlay.style.display = "none";
     popup.style.display = "none";
 };

 document.getElementsByClassName("EditQuestion").onclick = function () {
     var overlay = document.getElementsByClassName("overlay");
     var popupEdit = document.getElementsByClassName("popupEdit");
     overlay.style.display = "block";
     popupEdit.style.display = "block";
 };

 document.getElementsByClassName("CloseEditBtn").onclick = function () {
     var overlay = document.getElementsByClassName("overlay");
     var popupEdit = document.getElementsByClassName("popupEdit");
     overlay.style.display = "none";
     popupEdit.style.display = "none";
 };
 };

CSS

 #overlay {
 display:none;
 position:fixed;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 background:#000;
 opacity:0.5;
 z-index:99999;
  }

 .overlay {
 display:none;
 position:fixed;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 background:#000;
 opacity:0.5;
 z-index:99999;
  }

  #popup {
  display:none;
  position:fixed;
  left:40%;
  top:30%;
  width:600px;
  height:150px;
  margin-top:-75px;
  margin-left:-150px;
  background:#FFFFFF;
  border:1px solid #000;
  z-index:100000;
  }

  .popupEdit {
  display:none;
  position:fixed;
  left:40%;
  top:30%;
  width:600px;
  height:150px;
  margin-top:-75px;
  margin-left:-150px;
  background:#FFFFFF;
  border:1px solid #000;
  z-index:100000;
  }

 button#AskQuestion{
padding: 0;
border: none;
background: none;
color:#A8A8A8;
font-weight: bold;
  }

 button#CloseBtn {
padding: 0;
border: none;
background: none;
position:absolute;
right:10px;
top:5px;
  }

button.EditQuestion{
padding: 0;
border: none;
background: none;
color:#A8A8A8;
font-weight: bold;
 }

 button.CloseEditBtn {
padding: 0;
border: none;
background: none;
position:absolute;
right:10px;
top:5px;
  }

HTML Ask question Edit question

   <div id="overlay"></div>

   <div id="popup">
   <h2>Question?</h2>
   <button id="CloseBtn">Close</button>
   </div>

   <div class="popupEdit">
   <h2>Edit Question</h2>
   <button class="CloseEditBtn">Close</button>
   </div>

Still no luck.......any takers...?

---

If you want to be able to edit each question (update it in database), you'll need the question's id from the database.

I would do something like this:

<button id="EditQuestion" onclick="editQuestion(2);">Edit question</button>

In your onclick action, pass the id (2 in this case) as an argument. In your editQuestion() function you show the popup and include this id in the edit form in a hidden field.

<script>
function editQuestion(questionId){
   var overlay = document.getElementById("overlay");
   var popupEdit = document.getElementById("popupEdit");
   //in your edit form, create a hidden field and put var questionId in as value
   overlay.style.display = "block";
   popupEdit.style.display = "block";
}
</script>