div #id in foreach loop only selects last variable when trying to show/hide in function

Question

I am navigating through a simple foreach loop to get "blog posts". It shows basic blog information, a reply and delete button. When I select the 'reply' button, a small form beneath the reply button appears to fill out. The problem is, the function I am passing the variable to, only gets the last id for the form. How do I change my function or div element to be unique for each instance?

I have tried setting up PHP @echo variable's on the "id" and function, I have checked all my opening and closing brackets 10-fold. I have tried using different GetElementBy ... methods. I started looking into Jquery but I wanted to get this finished with PHP/Javascript only.

<?php foreach ($mainentries as $entry) : 
$subentryID = $entry['SubEntryID'];
  if ($subentryID == "0") 
  { ?>
      <div><tr><td><?php echo ('#'.$entry['EntryID'].' - ')?></td>
               <td><?php echo $entry['Body']; ?></td>
               <br />
               <?php foreach($subentries as $subentry) : ?>
               <?php if ($subentry['SubEntryID'] == $entry['EntryID']) 
                     {   ?>
              <div id="subposts">
              <td><td><td>#<?php echo $subentry['EntryID'];?></td><br>
              <td>
              <?php echo $subentry['Body']; ?>
              </td></td></td>
       </div>
       <?php } endforeach; ?>
       <br />
       <td>
<button onclick="cookiechecksub()">Reply</button>
    <?php echo $entry['EntryID']; 
     $subform = $entry['EntryID']; ?>
     <div id="<?php echo $subform?>" style="display:none">
     <form action="Add_subentry.php" method="post" id="Add_subentry"> 
     <label>Title:</label><br /> 
     <input type = "text" name="Title" class="Title"/> <br />
     <label>Body</label><br />
     <div class="area">
     <input type = "textarea" name="Body" class="Body"/><br />
     </div>
     <input type="hidden" readonly="true" name="EntryID" value="<?php echo $entry['EntryID']; ?>" />
     <input type=submit id="btnReply" value="Submit Reply"/>
     </form>
     </div></td>
     <td>
     <form action="Delete_entry.php" method="post" id="Delete_entry">    
     <input type="hidden" readonly="true" name="EntryID" value="<?php echo $entry['EntryID']; ?>" />
     <?php if ($userid == 1) 
     { ?>
     <input type="submit" id="btnDelete" value="Delete Post"/>
     <?php } ?>
     <br /><br />
     </form>
     </td>
     </tr>
     </div>
     <?php 
} endforeach; ?>

<Script>
function cookiechecksub() {
    if (!userid) {
        if (confirm("Please log in first")) {
            window.location.replace("http://localhost/alexdes/login-logout.php");
            }
        }
    else {
        TryAddSubPost();
    }
}
function TryAddSubPost() 
{
    var x = document.getElementById("<?php echo $subform?>");
    if (x.style.display === "none") 
    {
        x.style.display="block";
    } 
    else 
    {
        x.style.display="none";
    }
}
</Script>

Answer 1

this is because you used php echo in the js function especially in TryAddSubPost

change it to be like this:

<script>
function cookiechecksub(id) {
    if (!userid) {
        if (confirm("Please log in first")) {
            window.location.replace("http://localhost/alexdes/login-logout.php");
            }
        }
    else {
        TryAddSubPost(id);
    }
}
function TryAddSubPost(id) 
{
    var x = document.getElementById(id);
    if (x.style.display === "none") 
    {
        x.style.display="block";
    } 
    else 
    {
        x.style.display="none";
    }
}
</script>

and use the id from php only when calling the function, like this:

<button onclick="cookiechecksub('<?php echo $entry['EntryID']?>')">Reply</button>

Answer 2

给cookiechecksub一个参数，并将其传递给TryAddSubPost

<button onclick="cookiechecksub('<?=$entry['EntryID']?>')">