title: Generate html according to category through php or jquery
body: <p>I am facing a problem to show html like this from my webservice.</p>
  
  <p><a href="https://i.stack.imgur.com/iwOzC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iwOzC.png" alt="a"></a></p>
  
  <p>In database I have two tables <code>product</code> and <code>product_category</code> both have relation on id like <code>product.category_id=product_category.id</code>. and I am using mysqli and php.</p>
  
  <p><strong>PHP</strong>:</p>
  
  <pre><code>function get_product_by_category(){
      $query = "SELECT * from product p JOIN product_category pc ON pc.id = p.category_id";
      $result = $this-&gt;fetch_all($query);
      if($result&gt;0){
          $data = json_encode($result);
      }else{
          $data = json_encode(array("status"=&gt;false));
      }
      echo $data;
  }
  </code></pre>
  
  <p><strong>Json</strong>:</p>
  
  <pre><code>[
      {
          "id": "1",
          "category_id": "1",
          "product_name": "Plain Shoes",
          "product_price": "10000",
          "product_discount": "20",
          "valid_upto": "2015-10-10",
          "size": "Small,Medium",
          "color": "Brown,Black",
          "image": "1,2,3",
          "caption": "behtreen",
          "description": "alal",
          "details": "lush",
          "created_date": "2015-10-31 22:14:44",
          "category_name": "Shoes"
      },
      {
          "id": "2",
          "category_id": "2",
          "product_name": "Kurta",
          "product_price": "2000",
          "product_discount": "10",
          "valid_upto": "2015-10-10",
          "size": "Small",
          "color": "Blue,Sky",
          "image": "1,2,3",
          "caption": null,
          "description": null,
          "details": null,
          "created_date": "2015-10-31 22:56:53",
          "category_name": "Dress"
      },
      {
          "id": "1",
          "category_id": "1",
          "product_name": "Shoes",
          "product_price": "9000",
          "product_discount": "40",
          "valid_upto": "2015-10-10",
          "size": null,
          "color": null,
          "image": null,
          "caption": null,
          "description": null,
          "details": null,
          "created_date": "2015-10-31 23:07:46",
          "category_name": "Shoes"
      }
  ]
  </code></pre>
  
  <p>Now i want this json to create html like my image.</p>