title: next previous button in div jquery mobile
body: <p>i have a total of 11 div in my app. what i want to do is to display 3 divs in between 2 permanent div it should look like this</p>
  
  <p>|first permanent div| |div 1| |div 2| |div 3| |second permanent div|</p>
  
  <p>|previous| |next|</p>
  
  <p>when i click on next is should look like this</p>
  
  <p>|first permanent div| |div 2| |div 3| |div 4| |second permanent div|</p>
  
  <p>|previous| |next|</p>
  
  <p>and so on. and when im in div 1,2,3 the previous should be disabled and when im in 7,8,9 the next should be disabled.</p>
  
  <p>but i cant make it i'm using this fiddle as a sample <a href="http://jsfiddle.net/WGkPV/1/" rel="nofollow">http://jsfiddle.net/WGkPV/1/</a> its working but only one div is shown in the center of my two permanent div which is not in my plan.im getting like this</p>
  
  <p>|first permanent div| |div 1| |second permanent div|</p>
  
  <p>|previous| |next|</p>
  
  <p>any suggestion will be taken seriously.</p>
  
  <p>here is the code of the fiddle im working on as tutorial</p>
  
  <pre><code>$(document).ready(function () {
      var divs = $('.mydivs&gt;div');
      var now = 0; // currently shown div
      divs.hide().first().show();
      $("button[name=next]").click(function (e) {
          divs.eq(now).hide();
          now = (now + 1 &lt; divs.length) ? now + 1 : 0;
          divs.eq(now).show(); // show next
      });
      $("button[name=prev]").click(function (e) {
          divs.eq(now).hide();
          now = (now &gt; 0) ? now - 1 : divs.length - 1;
          divs.eq(now).show(); // or .css('display','block');
          //console.log(divs.length, now);
      });
  });
  
  &lt;div class="mydivs"&gt;
      &lt;div&gt;div 1&lt;/div&gt;
      &lt;div&gt;div 2&lt;/div&gt;
      &lt;div&gt;div 3&lt;/div&gt;
      &lt;div&gt;div 4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>