<?php
    $stmt = $mysqli->prepare("SELECT * FROM products LIMIT 10");
    $stmt->execute();
    $products = $stmt->get_result();
    $product_array = array();
    while($product = $products->fetch_assoc()){
        $product_array[] = $product;
    }
    echo json_encode($product_array);
?>

<style>
.product
{
width: 100px;
height:100px;
margin-bottom: 10px;
}
</style>

<div class="product_area">
<div class="product">
    <h3>Product 1</h3>
    <p>Price: $10</p>
</div>
<div class="product">
    <h3>Product 2</h3>
    <p>Price: $10</p>
</div>
<div class="product">
    <h3>Product 3</h3>
    <p>Price: $10</p>
</div>
<div class="product">
    <h3>Product 4</h3>
    <p>Price: $10</p>
</div>
</div>

$(document).ready(function()
{
    $.ajax(
    {
        url: 'product.php',
        dataType: 'JSON',
        success: function(data)
        {
            //This is where I am stucked. How do I append the new data beneath the current data in `product_area`.
            for(i=0; i<=data.length; i++)
            {
            }
            window.History.pushState({urlPath:'&view=products'},"",'&view=product');
        }
    });
});