title: how to append data one by one in html table using jquery
body: <p>my problem is when i insert a new data it append on the same <code>&lt;td&gt;</code> of the <code>&lt;table&gt;</code>, i want to append data in a new block , so that the data/item is displayed one by one just like snapdeal ex:-<a href="http://www.snapdeal.com/search?keyword=micromax&amp;santizedKeyword=&amp;catId=&amp;categoryId=175&amp;suggested=true&amp;vertical=p&amp;noOfResults=20&amp;clickSrc=suggested&amp;lastKeyword=&amp;prodCatId=&amp;changeBackToAll=false&amp;foundInAll=false&amp;categoryIdSearched=&amp;cityPageUrl=&amp;url=&amp;utmContent=&amp;dealDetail=" rel="nofollow">http://www.snapdeal.com/</a>.</p>
  
  <p>Sorry for my bad english. </p>
  
  <p><strong>display-posts.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;AdPortal&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
      &lt;div class="container"&gt;
          &lt;div class="header"&gt;
              &lt;div&gt;
  
                  &lt;img class="logo" src="images/zuikr.png" alt="logo" /&gt;
  
              &lt;/div&gt;
              &lt;div class="post_ad"&gt;
                  &lt;ul class="header_nav"&gt;
                      &lt;a href="http://localhost/adportal/login.html"&gt;&lt;li class="header_nav_link"&gt;post a free ad&lt;/li&gt;&lt;/a&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="nav"&gt;
              &lt;ul class="nav_link"&gt;
                  &lt;div class="nav_link_div"&gt;&lt;a href="http://localhost/adportal/index.html"&gt;&lt;li class="nav_link_list"&gt;HOME&lt;/li&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="nav_link_div"&gt;&lt;a href="#"&gt;&lt;li class="nav_link_list"&gt;CONTACT US&lt;/li&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="nav_link_div"&gt;&lt;a href="#"&gt;&lt;li class="nav_link_list"&gt;ABOUT&lt;/li&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="display_posts"&gt;
              &lt;img src="" alt="post" id="path" class="post_image"&gt;
  
              &lt;table class="post_data"&gt;
                  &lt;tr &gt;
                      &lt;td colspan = "2"&gt;
                          &lt;p style="text-align:center;font-weight:bold"&gt;Followings are the Details of This Ad&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;
  
                          &lt;tr&gt;&lt;td&gt;ID of Ad is&lt;/td&gt;&lt;td  id="post_id"&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;Title of Ad is:&lt;/td&gt;&lt;td  id="post_title"&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;Model of Ad is:&lt;/td&gt;&lt;td  id="post_model"&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;Price of Ad is:&lt;/td&gt;&lt;td  id="post_price"&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;Description about Ad is:&lt;/td&gt;&lt;td  id="post_description"&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;Name:&lt;/td&gt;&lt;td  id="post_name"&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;Your communicating email is:&lt;/td&gt;&lt;td  id="post_email"&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;Contact Number:&lt;/td&gt;&lt;td  id="post_phone"&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;city:&lt;/td&gt;&lt;td  id="post_city"&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;Category of Your post is:&lt;/td&gt;&lt;td  id="post_category"&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;/table&gt;
  
                  &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;footer&gt;
          &lt;p id="company_name"&gt;&lt;/p&gt;
      &lt;/footer&gt;
  
  &lt;/div&gt;
  &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;script src="js/company-name.js"&gt;&lt;/script&gt;
  &lt;script src="js/display-posts.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>display-posts.js</strong></p>
  
  <pre><code>$(document).ready(function() {
      $.ajax({
          url: 'php/display-posts.php',
          type: 'GET',
  
  
          success:function(data)
          {
              var result = $.parseJSON(data);
  
              $.each(result, function(key, value) {
                  $.each(value, function(key, value) {
                      if (key === 'id') { $('#post_id').append(value); };
                      if (key === 'title') { $('#post_title').append(value); };
                      if (key === 'price') { $('#post_price').append(value); };
                      if (key === 'model') { $('#post_model').append(value); };
                      if (key === 'description') { $('#post_description').append(value); };
                      if (key === 'name') { $('#post_name').append(value); };
                      if (key === 'email') { $('#post_email').append(value); };
                      if (key === 'phone') { $('#post_phone').append(value); };
                      if (key === 'city') { $('#post_city').append(value); };
                      if (key === 'category') { $('#post_category').append(value); };
                      if (key === 'path') { $('#path').attr('src', value.slice(3) ) };
                  });
              });
  
          }
  
      });
  });
  </code></pre>
  
  <p><strong>display-posts.php</strong></p>
  
  <pre><code>&lt;?php
  session_start();
  
  require_once 'database.php';
  
  
  $category = $_SESSION['category'];      
  $data  = array();
  $query = $dbh-&gt;prepare("SELECT * FROM posts WHERE category = ?");
  $query-&gt;execute(array($category));
  $data = $query-&gt;fetchall(PDO::FETCH_ASSOC);
  
  foreach ($query as $key =&gt; $value) {
      $data[$key] = $value;
  }
  $result = json_encode($data);
  echo $result;
  </code></pre>