title: how to format the display of results after a sql query
body: <p>i have been trying to format my results which is being sorted by the first letter of the surname but having problems</p>
  
  <p>i need it to echo in the following format </p>
  
  <pre><code>&lt;section&gt;                       
                        &lt;div id="slider"&gt;
                          &lt;div class="slider-content"&gt;
                            &lt;ul&gt;
                              &lt;li id="LETTER"&gt;&lt;a name="LETTER" class="title"&gt;LETTER&lt;/a&gt;&lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;SURNAME&lt;/a&gt;&lt;/li&gt;
                                &lt;/ul&gt;
                              &lt;/li&gt;
  
                                &lt;/ul&gt;
                              &lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;         
                      &lt;/section&gt;
  </code></pre>
  
  <p>i am have tried to split it so (see code bellow) but it not rendering correctly</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;MySQLi Read Records&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;section&gt;                       
                        &lt;div id="slider"&gt;
                          &lt;div class="slider-content"&gt;
                            &lt;ul&gt;
  &lt;?php
  //include database connection
  include 'db_connect.php';
  
  //query all records from the database
  $query = "  SELECT name,
           surname,
           mobile,
           UPPER (LEFT(surname, 1)) AS letter
      FROM contacts 
  ORDER BY surname";
  
  //execute the query
  $result = $mysqli-&gt;query( $query );
  
  //get number of rows returned
  $num_results = $result-&gt;num_rows;
  
  //this will link us to our add.php to create new record
  
  
  if( $num_results &gt; 0){ //it means there's already a database record
  
  
      //creating our table heading
  
  
      //loop to show each records
      while( $row = $result-&gt;fetch_assoc() ){
              //extract row
              //this will make $row['firstname'] to
              //just $firstname only
              extract($row);
  
              //creating new table row per record
              if (!isset($lastLetter) || $lastLetter != $row['letter'])
  {
   echo '&lt;li id="', $row['letter'], '"&gt;&lt;a name="', $row['letter'],'" class="title"&gt;', $row['letter'],'&lt;/a&gt;&lt;ul&gt;';
      $lastLetter = $row['letter'];
    echo "bottom";  
  }
  echo "&lt;li&gt;&lt;a href='#'&gt;{$surname} - {$name}&lt;/a&gt;&lt;/li&gt;";
  
  
      }
  
  
  }else{
      //if database table is empty
      echo "No records found.";
  }
  
  //disconnect from database
  $result-&gt;free();
  $mysqli-&gt;close();
  
  ?&gt; &lt;/ul&gt;
                              &lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;         
                      &lt;/section&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>i need to find where and how to echo these sections so it would be like this</p>
  
  <p>:- UPDATE -:</p>
  
  <p>with the reply i got itested it and it goes something like this</p>
  
  <pre><code>&lt;body&gt;
  &lt;section&gt;
  &lt;div id="slider"&gt;
  &lt;div class="slider-content"&gt;
  &lt;ul&gt;
  &lt;li id="E"&gt;&lt;a name="E" class="title"&gt;E&lt;/a&gt;
    &lt;ul&gt;
    bottom
    &lt;li&gt;&lt;a href='#'&gt;egg - smash&lt;/a&gt;&lt;/li&gt;
    &lt;li id="S"&gt;&lt;a name="S" class="title"&gt;S&lt;/a&gt;
      &lt;ul&gt;
      bottom
      &lt;li&gt;&lt;a href='#'&gt;surname&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;surname&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;surname&lt;/a&gt;&lt;/li&gt;
      &lt;li id="Z"&gt;
      &lt;a name="Z" class="title"&gt;Z&lt;/a&gt;
      &lt;ul&gt;
        bottom
        &lt;li&gt;&lt;a href='#'&gt;zoo&lt;/a&gt;&lt;/li&gt;
        &lt;!-- &lt;/ul&gt; BAD UL ?--&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>when it should be</p>
  
  <pre><code>&lt;section&gt;                       
                        &lt;div id="slider"&gt;
                          &lt;div class="slider-content"&gt;
                            &lt;ul&gt;
                              &lt;li id="s"&gt;&lt;a name="s" class="title"&gt;s&lt;/a&gt;&lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;surname&lt;/a&gt;&lt;/li&gt;
                                &lt;/ul&gt;
                              &lt;/li&gt;
  
                                &lt;/ul&gt;
                              &lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;         
                      &lt;/section&gt; 
  </code></pre>