title: Populate HTML DIV with data from mySQL
body: <p>I have a MySQL DB <code>"dorav3"</code> with a table <code>"dtab1"</code> with the below column containing business card info. I also have a php script and HTML page to display the DB data in a HTML table.</p>
  
  <p>My question is how can I go from just populating a table to populating my flip cards below </p>
  
  <p>where I currently do  <strong><code>&lt;td&gt;&lt;?php echo $row1[0];?&gt;&lt;/td&gt;</code></strong> for the table</p>
  
  <p>Should I do something like for the flip card?</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="flip-box"&gt;
    &lt;div class="flip-box-inner"&gt;
      &lt;div class="flip-box-front"&gt;
        &lt;h2&gt;&lt;?php echo $row1[0];?&gt;&lt;/h2&gt;
         &lt;h2&gt;&lt;?php echo $row1[1];?&gt;&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="flip-box-back"&gt;
        &lt;h4&gt;&lt;?php echo $row1[2];?&gt;&lt;/h4&gt;
        &lt;h4&gt;&lt;?php echo $row1[3];?&gt;&lt;/h4&gt;
        &lt;h4&gt;&lt;?php echo $row1[4];?&gt;&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am really stuck!</p>
  
  <pre><code>+--------------------+---------+------+-----+---------+----------------+
  | Field              | Type    | Null | Key | Default | Extra          |
  +--------------------+---------+------+-----+---------+----------------+
  | Title              | text    | YES  |     | NULL    |                |
  | Name               | text    | YES  |     | NULL    |                |
  | Email              | text    | YES  |     | NULL    |                |
  | Website            | text    | YES  |     | NULL    |                |
  | Contact            | text    | YES  |     | NULL    |                |
  | id                 | int(11) | NO   | PRI | NULL    | auto_increment |
   ----------------------------------------------------------------------
  </code></pre>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>&lt;?php
  
  // php populate html table from mysql database
  
  $hostname = "localhost";
  $username = "xxx";
  $password = "xxx";
  $databaseName = "dorav3";
  
  // connect to mysql
  $connect = mysqli_connect($hostname, $username, $password, $databaseName);
  
  // mysql select query
  
  $query = "SELECT * FROM `dtab1";
  
  
  // result for method one
  $result1 = mysqli_query($connect, $query);
  
  // result for method two 
  $result2 = mysqli_query($connect, $query);
  
  $dataRow = "";
  
  while($row2 = mysqli_fetch_array($result2))
  {
      $dataRow = $dataRow."&lt;td&gt;$row2[0]&lt;/td&gt;&lt;td&gt;$row2[1]&lt;/td&gt;&lt;td&gt;$row2[2]&lt;/td&gt;&lt;td&gt;$row2[3]&lt;/td&gt;&lt;td&gt;$row2[4]&lt;/td&gt;&lt;td&gt;$row2[5]&lt;/td&gt;&lt;td&gt;$row2[6]&lt;/td&gt;&lt;td&gt;$row2[7]&lt;/td&gt;&lt;td&gt;$row2[8]&lt;/td&gt;&lt;td&gt;$row2[9]&lt;/td&gt;&lt;td&gt;$row2[10]&lt;/td&gt;&lt;td&gt;$row2[11]&lt;/td&gt;&lt;td&gt;$row2[12]&lt;/td&gt;&lt;td&gt;$row2[13]&lt;/td&gt;&lt;td&gt;$row2[14]&lt;/td&gt;&lt;td&gt;$row2[15]&lt;/td&gt;";
  }
  
  ?&gt;
  </code></pre>
  
  <p><strong>HTML to Populate table</strong></p>
  
  <pre><code>    &lt;body&gt;
          &lt;table&gt;
               &lt;tr&gt;
                  &lt;th&gt;Title&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Email&lt;/th&gt;
                  &lt;th&gt;Website&lt;/th&gt;
                  &lt;th&gt;Contact&lt;/th&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
                &lt;?php while($row1 = mysqli_fetch_array($result1)):;?&gt;
              &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;?php echo $row1[0];?&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;?php echo $row1[1];?&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;?php echo $row1[2];?&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;?php echo $row1[3];?&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;?php echo $row1[4];?&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;?php endwhile;?&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I want to do next is populate a more rich format with my data.</p>
  
  <p><strong>HTML to Populate cards</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="flip-box"&gt;
    &lt;div class="flip-box-inner"&gt;
      &lt;div class="flip-box-front"&gt;
        &lt;h2&gt;Title&lt;/h2&gt;
         &lt;h2&gt;Name&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="flip-box-back"&gt;
        &lt;h4&gt;Email&lt;/h4&gt;
        &lt;h4&gt;Website&lt;/h4&gt;
        &lt;h4&gt;Contact&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="flip-box"&gt;
    &lt;div class="flip-box-inner"&gt;
      &lt;div class="flip-box-front"&gt;
        &lt;h2&gt;Title&lt;/h2&gt;
         &lt;h2&gt;Name&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="flip-box-back"&gt;
        &lt;h4&gt;Email&lt;/h4&gt;
        &lt;h4&gt;Website&lt;/h4&gt;
        &lt;h4&gt;Contact&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="flip-box"&gt;
    &lt;div class="flip-box-inner"&gt;
      &lt;div class="flip-box-front"&gt;
        &lt;h2&gt;Title&lt;/h2&gt;
         &lt;h2&gt;Name&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="flip-box-back"&gt;
        &lt;h4&gt;Email&lt;/h4&gt;
        &lt;h4&gt;Website&lt;/h4&gt;
        &lt;h4&gt;Contact&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>