How do I display all the related images in a div and the related comment into a separated div and repeat the wrapping div for the new entry?

See more:

HTML

PHP

MySQL

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.

The output that I want to get
JSFiddle Example in HTML

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  |
---------------------------

The code for fetching the comment with the related images:

$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;
  } 

 }

What I have tried:

I have tried to loop div as well but it is just looped the div itself.