title: show class order by id
body: <p>i have few div with same class but different ids</p>
  
  <pre><code>&lt;div class='box' id='zz1'&gt;&lt;/div&gt;
  &lt;div class='box' id='zz2'&gt;&lt;/div&gt;
  &lt;div class='box' id='zz3'&gt;&lt;/div&gt;
  &lt;div class='box' id='zz4'&gt;&lt;/div&gt;
  &lt;div class='box' id='zz5'&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>All div are display:none only first div is visible. What i want is if i click on on #zz1 then it will be hide and #zz2 will visible and if i click on #zz2 the it will hide and show #zz3.. I can use condition here  like this</p>
  
  <pre><code>$('.box').click(function(){
  $(this).hide();
  var getId = $(this).attr('id'); 
  if(getId == "zz1") {  $("#zz2").fadeIn(); }
  if(getId == "zz2") {  $("#zz3").fadeIn(); }
  if(getId == "zz3") {  $("#zz4").fadeIn(); }
  if(getId == "zz4") {  $("#zz5").fadeIn(); }
  });
  </code></pre>
  
  <p>I'm Using dynamic data and number of div will change according data so it will not work is there any better way to show next div with same class... Thanks</p>