Working with multiple MySQL rows and For Loop - not working

Question

I have trying to print the top 3 recent posts (rows) from MySQL. I am using a for loop that counts 3 times to prints out 3 DIVS for each post (row). Then I use for each loop to print out the MySQL row. The problem is I am printing out all three rows inside one DIV.

Here is the code:

 <!-- Content Body Container -->
<div class="content-body" class="container-fluid">
  <div id="content-container">

    <?php
    $result = doSql("SELECT `gamereviews`.`reviewContent` FROM `gamereviews` ORDER BY `gamereviews`.`dateOfReview` DESC LIMIT 3");
    ?>

    <?php
      for($i = 1; $i<=3; $i++) {
    ?>
      <div id="outer-box">
        <div id="postImage-wrapper">
          image
        </div>
        <div id="postContent-wrapper">
          <h3> This is an Example post </h3>
          <span id="postInfo-wrapper">Author | 22/10/2015 | Xbox | 3 Comments</span><br />
          <?php
          if($result && mysqli_fetch_assoc($result)>0) {
            foreach($result as $row) {
              echo '<div onclick="alert(\''.$row['reviewContent'].'\');">'.substr($row['reviewContent'], 0, 300).'</div>';
            //  echo $row['reviewContent']. '<br /><br />';
            }
          }
          ?>
        </div>

        <div id="postRating-wrapper">
          7.7
        </div>
      </div>


  <?php
    }
    ?>
  </div>
</div>

How can I print each MySQL row into each DIV created by for loop? Any ideas?

UPDATE:

Here are the results: https://gyazo.com/5a91ed6a3837c0293c7504525ef86681

As you can see, all the rows are printed in the first DIV. That is, the first time for loop is run, it printed out all the rows inside it. But the SECOND time for loop is run, it doesn't print out anything inside the second div. It SHOULD print out the SECOND row from mysql in the SECOND DIV and FIRST row of mysql in FIRST DIV. And THIRD row of mysql in THIRD DIV

Answer 1

If I get your question right you shouldn't be using for in the first place Print three divs with one result in it:

    <?php
$counter = 0;
    if($result && mysqli_fetch_assoc($result)>0)
            foreach($result as $row) :
        if($counter >= 3)
            break;
        ?>
        <div id="outer-box">
            <div id="postImage-wrapper">
                image
            </div>
            <div id="postContent-wrapper">
                <h3> This is an Example post </h3>
                <span id="postInfo-wrapper">Author | 22/10/2015 | Xbox | 3 Comments</span><br />
                <?php
                echo '<div onclick="alert(\''.$row['reviewContent'].'\');">'.substr($row['reviewContent'], 0, 300).'</div>';
                //  echo $row['reviewContent']. '<br /><br />';
                ?>
            </div>

            <div id="postRating-wrapper">
                7.7
            </div>
        </div>


        <?php
    $counter++;
    endforeach;
    ?>

Answer 2

Change your code like this.

  <?php
      if($result && mysqli_fetch_assoc($result)>0) {
           $i = 1;
        foreach($result as $row) { ?>
         <div id="outer-box">
             <div id="postImage-wrapper">
                 image
             </div>
           <div id="postContent-wrapper">
              <h3> This is an Example post </h3>
              <span id="postInfo-wrapper">Author | 22/10/2015 | Xbox | 3 Comments</span><br />

              <?php  echo '<div onclick="alert(\''.$row['reviewContent'].'\');">'.substr($row['reviewContent'], 0, 300).'</div>';
       ?>
           </div>

        </div>

        <div id="postRating-wrapper">
            7.7
        </div>

     <?php

      if($i == 3)
            break;
      $i++;
      }// end of foreach
      }// end of if()
      ?>