Jquery product display in <div> tag
<p>My requirement left side some product name link will be there if I click product1 right box I get full desc about that product. Here I used jquery and html5. </p>

<pre><code>&lt;div class="cn_wrapper"&gt;            
    &lt;div id="cn_preview" class="cn_preview"&gt;    
    &lt;div class="cn_content" style="top:5px;"&gt;
                content1 desc
        &lt;/div&gt;                  
    &lt;/div&gt;      

    &lt;div id="cn_list" class="cn_list"&gt;
        &lt;div class="cn_page" style="display:block;"&gt;
            &lt;div class="cn_item selected"&gt;
                &lt;center style="vertical-align:middle"&gt;&lt;h2 &gt;Content 1&lt;/h2&gt;&lt;/center&gt;
            &lt;/div&gt;
            &lt;div class="cn_item selected"&gt;
                &lt;center style="vertical-align:middle"&gt;&lt;h2 &gt;Content 2&lt;/h2&gt;&lt;/center&gt;
            &lt;/div&gt;
                .
                upto 4          
        &lt;/div&gt;

        &lt;div class="cn_page"&gt;
            &lt;div class="cn_item selected"&gt;
                &lt;center style="vertical-align:middle"&gt;&lt;h2 &gt;Content 5&lt;/h2&gt;&lt;/center&gt;
            &lt;/div&gt;
            &lt;div class="cn_item selected"&gt;
                &lt;center style="vertical-align:middle"&gt;&lt;h2 &gt;Content 6&lt;/h2&gt;&lt;/center&gt;
            &lt;/div&gt;
            &lt;div class="cn_item selected"&gt;
                &lt;center style="vertical-align:middle"&gt;&lt;h2 &gt;Content 7&lt;/h2&gt;&lt;/center&gt;
            &lt;/div&gt;
            &lt;div class="cn_item selected"&gt;
                &lt;center style="vertical-align:middle"&gt;&lt;h2 &gt;Content 8&lt;/h2&gt;&lt;/center&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>here <code>div class="cn_page"</code> will display 4 product first if I click the next button then the next 4 product will display. Here I get all product list all will display at time. I used juqery code below.</p>

<pre><code>$.ajax({
  type: "POST",
  url: "AdvService.asmx/GetDetails",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(response) {
    var cars = response;

    $('#cn_list').empty();


    $.each(cars, function(index, MyData) {     

   $('#cn_list').append('&lt;div class=cn_item selected&gt;&lt;center style=vertical-align:middle&gt;&lt;h2&gt;&lt;/h2&gt;'+ MyData.Productname + '&lt;/center&gt;&lt;/div&gt;&lt;div class="cn_nav"&gt;'+
                            '&lt;a id="cn_prev" class="cn_prev disabled"&gt;&lt;/a&gt;'+
                            '&lt;a id="cn_next" class="cn_next"&gt;&lt;/a&gt;'+
                            '&lt;/div&gt;');

    });

  },

  failure: function(msg) {
    $('#cn_list').text(msg);
  }
});
</code></pre>

<p>Please give me an idea of how to I can show the first 4 product <code>div</code>s and when I click for the next 4 products if I click on the previous button, it should show previous 4 products.</p>
