Php Looping debugging not desire result

I need someone help me with my loop..

I want to create a rack that has 4 thumbnails images and every 4 images want to start a new one.. like this one i has with html :

I have my while loop to fetch all images from my database:

$query = "sp_supplier_info 0";      
$select_all_brochures = sqlsrv_query($con, $query);     
while($row = sqlsrv_fetch_array($select_all_brochures)) {
   $brochures = json_decode($row['brochures'], true);
}

Then I create a for loop so I can fetch all data from that brochures array:

$a = count($brochures); 
for($i=0;$i<$a;$i++){  
    $bro_link = $brochures[$i]['href'];
    $bro_name = $brochures[$i]['name'];
    $thumb    = $brochures[$i]['thumbnail'];
    echo "<ul> //starts list
    <li class='popup'> //lists item I need 4
    <a href='{$bro_link}' target='_blank' title='{$bro_name}'><img alt='{$bro_name}' src='{$thumb}'></a>
    <span class='popuptext'>
    <div class='close'><i class='fa fa-times'></i></div>
    <div class='title ng-binding'>{$bro_name}</div>
    <button class='download' href='{$bro_link}'>Download</button>
    </span>
    </li>     //item                  
    </ul>
    //start rack
    <div class='rack hidden-xs'>
    <div class='top'>
    <div class='surface'></div>
    </div>
    <div class='bottom'></div>"; //end rack                 
}

But the result i get is that:

So if I am not wrong I need 4 <li class='popup'> and after that I need to echo </ul> //start rack <div class='rack hidden-xs'> <div class='top'> <div class='surface'></div> </div> <div class='bottom'></div> that to create the rack, and start again from the first <ul> and that continue every 4 items.

I tried by creating an If statement if($i % 4 == 0) before ul and <li> but I got same result.

Can someone help?

Here is my full code:

    <div class="shelf"> 
    <?php
    $query = "sp_supplier_info 0";      
    $select_all_brochures = sqlsrv_query($con, $query);     
    while($row = sqlsrv_fetch_array($select_all_brochures)) {
        $brochures = json_decode($row['brochures'], true); 
        $a = count($brochures); 
        for($i=0;$i<$a;$i++){  
            $bro_link = $brochures[$i]['href'];
            $bro_name = $brochures[$i]['name'];
            $thumb    = $brochures[$i]['thumbnail'];
            echo "<ul>
            <li class='popup'>
            <a href='{$bro_link}' target='_blank' title='{$bro_name}'><img alt='{$bro_name}' src='{$thumb}'></a>
            <span class='popuptext'>
            <div class='close'><i class='fa fa-times'></i></div>
            <div class='title ng-binding'>{$bro_name}</div>
            <button class='download' href='{$bro_link}'>Download</button>
            </span>
            </li>                       
            </ul>
            <div class='rack hidden-xs'>
            <div class='top'>
            <div class='surface'></div>
            </div>
            <div class='bottom'></div>";                  
        }
    }     
    ?>
    </div>