Move child div into a parent div

Question

Im trying to output posts and comments reddit style. This is the expected result (mockup HMTL) but currently I look like this .

This is the code I'm using right now to output posts and comment:

<?php if(!empty(getMessage())): ?>
  <div class="container">
      <h1>The nested comment exampel!</h1>
  <?php   
      $i=0; //initialize flag
      foreach (getMessage() as $value){ ?>
      <div class="comment" id="<?= $value->id; ?>">
       //you don't need level class
          <?php if($value->visible == 0) : ?>
          <?= $value->date ?><br>
          Deleted
          <?php elseif($value->visible == 1): ?>
          <?= $value->date ?> <a href="index.php?delete=<?= $value->id ?>">X</a> <?= 'id: '. $value->id . ', sort order: ' .$value->sort_order . ', level: '.$value->level ;?><br>
          <?= $value->comment_text ?>

          <form action="index.php" method="post">
          <input type="hidden" name="id" value="<?= $value->id ?>" />
          <input type="hidden" name="parent" value="<?= $value->reply_to ?>" />
          Add comment: <input type="text" name="svar">
          <input type="submit">
          </form>

          <?php endif; ?>

<?php 
        $i++; //sum flag

    }
    for($x=0; $x<=$i; $x++) { //paint div closers
           echo '</div>' ;
   }  
 ?>
<? endif; ?>
      </div>

What if I change the foreach statement to

<?php if(!empty(getMessage())): ?>
  <div class="container">
      <h1>The nested comment exampel!</h1>
  <?php    foreach (getMessage() as $value){ ?>
      <div class="level_<?= $value->level; ?> comment" id="<?= $value->id; ?>">
          <?php if($value->visible == 0) : ?>
          <?= $value->date ?><br>
          Deleted
          <?php elseif($value->visible == 1): ?>
          <?= $value->date ?> <a href="index.php?delete=<?= $value->id ?>">X</a> <?= 'id: '. $value->id . ', sort order: ' .$value->sort_order . ', level: '.$value->level ;?><br>
          <?= $value->comment_text ?>

          <form action="index.php" method="post">
          <input type="hidden" name="id" value="<?= $value->id ?>" />
          <input type="hidden" name="parent" value="<?= $value->reply_to ?>" />
          Add comment: <input type="text" name="svar">
          <input type="submit">
          </form>

          <?php endif; ?>
        </div>
<?php } endif; ?>
      </div>

And output everything "flat". And depending on class, move it to the "right" div with jQuery.

So if <div class="level_0 comment" id="1"> is the parent div (level_0), div with level 1 <div class="level_1 comment" id="3"> should be inside the parent div. And <div class="level_2 comment" id="14"> level 2 should be inside the child div, level 1. This fiddle hopefully gives a better understanding: And this tree of comments can contain numerous of the same level class, so how do we know it is moves inside right div? Due to SELECT * FROM tree ORDER BY reply_to ASC, sort_order ASC , every comment is fetch already sorted. So it won't be a problem, the child should be moved "one" div up.

Here is some sample data .

This is the function I am using to retrieve data:

function getMessage(){
$app = new Connection();

    $sql = 'SELECT *
    FROM tree ORDER BY reply_to ASC, sort_order ASC';
$query = $app->getConnection()->prepare($sql);
$query->execute();

    return $query->fetchAll();
}

How can I output data reddit style with jQuery.

Answer 1

Surely this is a CSS fix?

Output all comments in a list and pad each one according to the level class.

.level_0 {    margin-left:  0px;    }
.level_1 {    margin-left: 10px;    }
.level_2 {    margin-left: 20px;    }

etc..