How to display all related images with a comment i

I want to display all the related images for a comment in a box together but display the comments in a different div Something like on the image that I have attached.

If there is a new post then repeat the main div with PHP.

I can't figure out how should I do this. I assume that I have to break the loop somewhere.

The database structure

posts:

| commentid |  comment  | iamgesid |
------------------------------------
|     1     |   fool    |   5557   |
|     2     |  fool2    |   5585   |
------------------------------------

multiple_image:

| id |  image  | imagesid |
---------------------------
| 1  |  name1  |    5557  |
| 2  |  name2  |    5557  |
| 3  |  name3  |    5585  |
---------------------------

I want something like this

.main {
  background-color: #e3e3e3;
  width: 400px;
  padding: 5px 4px;
  margin-bottom: 10px;
  border-radius: 2px;
}

.comments {
  padding: 10px;
  background-color: #eee;
}

.pics {
  padding: 10px;
  background-color: #c3c3c3;
}

<div class='main'>
  <div class='comments'>
    Related Comment here
  </div>
  <div class='pics'>
    Related Images here
  </div>
</div>
<!-- repeat the same thing with a new post -->
<div class='main'>
  <div class='comments'>
    Related Comment here
  </div>
  <div class='pics'>
    Related Images here
  </div>
</div>
<!-- etc -->
<div class='main'>
  <div class='comments'>
    Related Comment here
  </div>
  <div class='pics'>
    Related Images here
  </div>
</div>

The code for fetching images and the related comment

$sql = "SELECT * FROM images
    JOIN posts ON (images.imagesid=posts.imgs)
    ORDER BY  postID";
  $result = $conn->query($sql);
  if (!$result) {
      trigger_error('Invalid query: ' . $conn->error);
  }

  if ($result->num_rows > 0) {
    // output data of each row
    $comment = '';
    while($row = $result->fetch_assoc()) {
      if ($row['name'] == NULL) {
        $imgs= '';
      } else {
        $imgs= "<img width='' src='../images/".$row['name']."' >";
      }

  if($comment != $row['content']){
      echo $row['content'];
     $comment = $row['content'];
  }
    echo $imgs;
  } 

 }

Had to track down your repost, sorry it took so long to get back to you. Work interfered. Your code doesn't match your database columns, so I'm not sure weather your database example is correct, or your code. I guessed database, but if I guessed wrong you'll have to replace the appropriate database fields.

I simplified your database queries, because I think it's more important that you understand what they are doing, than it is to be efficient.

$sql = "SELECT * FROM multiple_image";
  $result = $conn->query($sql);
  if (!$result) {
      trigger_error('Invalid query: ' . $conn->error);
  }

  if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $imgs[$row['imageid]][$row['id']]= "<img width='' src='../images/".$row['name']."' >"; // array of image id's, with arrays of images inside them.
  } 

 }
$sql = "SELECT * FROM posts";
  $result = $conn->query($sql);
  if (!$result) {
      trigger_error('Invalid query: ' . $conn->error);
  }

  if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
      $commentsToImages[$row['commentid']] = $row['imagesid']; // array of post id's to picture ids
      $comments[$row['commentid']] = $row['comment']; // array of post id's to comment text.
  } 

 }

Now you just need to render your nice new arrays.

foreach($commentsToImages as $commentID =>$imagesID) {
    ?>
<div class='main'>
  <div class='comments'>


<?php echo $comments[$commentID]; // render the comment ?>
  </div>
  <div class='pics'>
    <?php
          foreach($imgs[$imagesID] as $img) { // foreach loop that will render all the images...
                  echo $img;
          }
    ?>
  </div>
</div>

<?php
}
?>

There is probably a typo or two in there, but that code should do what you want. I should clarify that this is not the best way to do this. It doesn't follow best practices, nor is it the most efficient. But if you are just learning for each loops, It requires the least new things to learn.

Simple DB queries.
arrays
for each loops.
If then statements.

You SHOULD go back and add if then statements to catch the various potential errors. I don't know if your database allows null values for example, but they could throw a wrench. But it will work either way.