html - draw seat structure from bus api in php -

i struggle drawing seat structure in webpage using response api.

here response array ,contains seat-number,row , column position of each seat

from want draw structure

<?php  $seats=$this->apiservice->getlayout();      foreach($seats $value) {       //seat number row , column position     //echo $value['id'].$value['row].$value['column'];    //seat number     echo $value['id']; } ?> 

here condtions seat structure

1.layout contains 5 rows

2.the number of columns may vary.

3.third row empty except last seat.

here output of line

echo 'seat-no:'.$value['id'].'positions:'.$value['row'].$value['column'];  seat-no:g1  positions:00 seat-no:g2  positions:01 seat-no:g3  positions:02 seat-no:g4  positions:03 seat-no:g5  positions:04 seat-no:g6  positions:05 seat-no:g7  positions:06 seat-no:g8  positions:07 seat-no:g9  positions:08 ........................ ........................ ........................ ........................ seat-no:b8  positions:47 seat-no:b9  positions:48 seat-no:b10  positions:49 

update

current structure

<?php   echo '<div class="bus">'; foreach($seats $value)     {         echo "<div class='seat $booked $pink' data-number='$seat' $book_seat amount='$total' uniq-id='$amount_div' data-ac='$ac' data-sleeper='$sleeper' data-lady='$ladies' data-fare='$base_fare'><img src='".base_url()."assets/images/seat.png' width='20' height='20' title='$seat'></div>";        } echo '</div>'; ?> 

style

.bus {     width:340px;     float:left;     min-height:150px;     border:1px solid #ccc;     padding:0 0 10px 10px } .seat {     background:#efefef;     float:left;     margin:10px 10px 0 0;     cursor:pointer;     padding:4; } 

result of code this