php使用while循环显示div，h1，ul中的数据

I am not very good in php and mysql but based on my code, I am able to display the results that I wanted but, it is not displaying in the right DOM structure.

I would like to display like below:

<div class="container">
<h1>Header</h1>
<ul><li>
<p>data 1</p>
<p>data 2</p>
</li></ul>
</div>

<div class="container">
<h1>Header</h1>
<ul><li>
<p>data 1</p>
<p>data 2</p>
</li></ul>
</div>

I have no idea why my code keep returning me the data and display everything in the 1st level ul instead of separating like below:

<div class="container">
<h1>Header</h1>
<ul><li>
<p>data1</p>
<p>data 2</p>

<div class="container">
<h1>Header</h1>
<ul><li>
<p>data1</p>
<p>data 2</p>
</li></ul>
</div>
</li></ul>
</div>

I have played around with the code and tried different ways but still unable to get it display properly. Below is my code:

<?php
        $data='';
        $previousVal = '';
        // Update new images
        $levelArray=array('B1','L1','L2','main','L3','L4','L5');
            foreach ($levelArray as $i=>$level) {
                $img = "img/".$level.".jpg";
                if($level=='main'){
                    $result = mysqli_query($con,"SELECT * FROM floor_directory ORDER BY categories");
                }
                else {
                    $result = mysqli_query($con,"SELECT * FROM floor_directory WHERE level='$level' ORDER BY categories");
                }

                while($row = mysqli_fetch_array($result)){
                    if($previousVal != $row['categories']){
                         $data .= '<div class="container"><h1>'.$row['categories'].'</h1>';
                         $previousVal = $row['categories'];
                    }
                     $data .= '<ul><li>
                               <p class="float_left">'.$row['name'].'</p>
                               <p class="float_right">'.$row['unit_number'].'</p>
                               </li></ul></div>';
                }

                if($levelArray[$i]=='main'){
                    echo '<div class="swiper-slide">
                    <img src="'.$img.'" alt="" />
                        <div class="content_container_main">'.$data.'</div>
                  </div>';
                }
                else {
                    echo '<div class="swiper-slide">
                    <img src="'.$img.'" alt="" />
                        <div class="content_container">'.$data.'</div>
                  </div>';
                }
                $data='';
                $previousVal = '';
            }
         ?>

Hope you guys understand. Thanks in advance for the help guys.

changing code in while will make it work, change this code,

while($row = mysqli_fetch_array($result)){
  if($previousVal != $row['categories']){
    $data .= '<div class="container"><h1>'.$row['categories'].'</h1>';
    $previousVal = $row['categories'];
  }
  $data .= '<ul><li>
  <p class="float_left">'.$row['name'].'</p>
  <p class="float_right">'.$row['unit_number'].'</p>
  </li></ul></div>';
}

with this,

while($row = mysqli_fetch_array($result)){
  if($previousVal != $row['categories']){
    $previousVal = $row['categories'];
  }
  $data .= '<div class="container"><h1>'.$row['categories'].'</h1>';
  $data .= '<ul><li>
  <p class="float_left">'.$row['name'].'</p>
  <p class="float_right">'.$row['unit_number'].'</p>
  </li></ul></div>';
}

you may even remove the if check (inside while loop) if not using in further script.