How to display table data structure based on what users registered

I am making a function where I track my users' registration. The users can choose whether they want to register at Red, Blue, Yellow, and Green. I have this table structure in my view. (Please see the screenshot) My target is how I can do this output based on their chosen registration color.

The first image is my target output.

The second image is my current output.

I have provided more explanation here with 3 conditions

if the previous color is the same as the current color, the data will go down.

example: 
prev - red
next - red 

the logs should go to the next column if the current color is not the same as the previous color

prev- red
next - blue


If the colors are Yellow And Green, the data will go down

Any suggestion/s on how can I achieve my target? Thank you

Controller:

function transaction(){
    $data= $this->dashboards->queryTransaction();
    $res = array();
    $prev = '';
    $next = '';
    
    $output = '<table id="displayLogs" class="table-bordered" >';
    $current = 0;
    $res[$current] = array();
    
    foreach ($data as $f) {
        $next = $f['logs'];
        switch ($f['logs']) {
            case "red":
                $btn = "bg-danger";
                break;
            case "blue":
                $btn = "bg-primary";
                break;
            case "green":
                $btn = "bg-success";
                break;
            case "yellow":
                $btn = "bg-warning";
                break;
            default:
                $btn = "bg-primary";
                break;
        }
        
        if ($prev == $next || $prev == '' || $next == "yellow" || $next == "green") {
        } else {
            $current++;
            $res[$current] = array();
        }
        $res[$current][] = $btn;
        // prevent change from same color like this case : RED -> YELLOW -> RED
        if ($next != "yellow" && $next != "green") {
            $prev = $next;
        }
    }
    
    $max = count($res[0]);
    foreach ($res as $btn) {
        if (count($btn) > $max) {
            $max = count($btn);
        }
    }

    
    for ($i = 0; $i < $max; $i++) {

   
        foreach ($res as $btn) {
            if (array_key_exists($i, $btn)) {
         
            
            
                $output .= '<td ><span data-toggle="tooltip" class="badge ' . $btn[$i] .
                '" style="font-size: 23px; margin: 0px; border-radius: 50px;">&#664;</span></td>';
            
            }else{
                $output .= '<td ></td>';
            }
      
        }
        $output .= '</tr>';
    }
    


    echo json_encode($output);
    
}

Solution

It looks like you're alternating between red and blue columns, yellow and green values are allowed in both columns. Values seem to be added from top to bottom and whenever a column can no longer add a value vertically, new values for that column are added to the right (making a 90 degree corner).

The last column in your example doesn't seem to follow this logic (I would end up with 37, 38, 39 and 40 in a horizontal row), so I've added some extra logic (the if ($y === 0) part) that adds values vertically again if the current value was added at the top of a new column.

$colors = ['red', 'red', 'blue', 'blue', 'yellow', 'green', 'red', 'red', 'red', 'red', 'green', 'red', 'yellow', 'red', 'blue', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'blue', 'blue', 'yellow', 'green', 'blue', 'blue', 'red', 'blue', 'blue', 'blue', 'blue', 'red', 'red', 'red', 'blue', 'blue', 'blue', 'blue'];

$array = [];
$columnColor = null; // will be red or blue
$currentColumn = 0;
$x = 0;
$y = 0;

foreach ($colors as $key => $color) {
    
    // if the current color is red or blue
    if ($color === 'red' || $color === 'blue') {
        
        // and the current color is different from the columnColor
        if ($columnColor !== null && $columnColor !== $color) {
            $currentColumn++; // move the currentColumn to the right
            $x = $currentColumn; // restart x in the current column
            $y = 0; // restart y at the top of the column
        }
        
        // set the columnColor
        $columnColor = $color;
    }
    
    $number = $key + 1;
    $array[$x][$y] = "<span style='color:$color'>$number</span>"; // change this to your table cell contents
    
    // calculate the coordinates for the next value:
    
    // if the current value was added vertically, we haven't reached the 6th row yet
    // and the next value can also be added vertically
    if ($x === $currentColumn && $y + 1 < 6 && !isset($array[$x][$y + 1])) {
        // add the next value vertically
        $y++;
    // else (the current value was added horizontally, we've reached the 6th row,
    // or the next value can not be added vertically)
    } else {
        // add the next value horizontally
        $x++;
        
        // if we happen to have moved right into the first position of a new column
        if ($y === 0) {
            $currentColumn = $x; // set the currentColumn equal to x, so that new values are again added vertically
            $columnColor = null; // reset the columnColor
        }
    }
}

And the html:

<table>
    <?php for ($i = 0; $i < 6; $i++) : ?>
        <tr>
            <?php foreach ($array as $x) : ?>
                <td><?php echo $x[$i] ?? ''; ?></td>
            <?php endforeach; ?>
        </tr>
    <?php endfor; ?>
</table>