Как отобразить все связанные изображения в div и соответствующий комментарий в отдельный div и повторить обертывание div для новой записи?

---

Я хочу отобразить все связанные изображения для комментария в поле вместе, но отобразить комментарии в другом div, например, на изображении, которое я прикрепил.

Результат, который я хочу получить
Пример JSFiddle в HTML

Если есть новый пост, то повторите основной div с PHP.

Я не могу понять, как мне это сделать. Я предполагаю, что я должен разорвать петлю где-то.

Структура базы данных:
сообщений:

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

несколько изображений:

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

Код для извлечения комментария с соответствующими изображениями:

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

 }

Что я уже пробовал:

Я также пытался зациклить div, но это просто зациклило сам div.

---