title: Adding class based on td value using jquery
body: <p>I have rows in the following way.</p>
  
  <pre><code>&lt;table id="tblInbox"&gt;
  &lt;tbody&gt;    
      &lt;tr class='active'&gt;&lt;td&gt;Daily Price&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Santosh&lt;/td&gt;&lt;/tr&gt;
      &lt;tr class='active'&gt;&lt;td&gt;Daily Price&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;Star&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Weekly Price&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;Zakeer&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Weekly Price&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;Ubed&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Weekly Price&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;xyz/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Daily Price&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;India&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Daily Price&lt;/td&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;Australia&lt;/td&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I will display rows which are having class 'active' by using </p>
  
  <pre><code>function displayActiveRows(){ // Displaying active rows
      $("#tblInbox tbody tr").each( function(){ 
      if($(this).hasClass('active')) { // If the row has class.
          console.log("has class");
          $(this).show(); // Display the row.
      } else {                
          $(this).hide(); // Hide the row.
      }       
      });
  }
  </code></pre>
  
  <p>On pressing "Next" button, I'd like to add class to only next 2 0r 10 (whatever the count is) rows which are having first td value as "Daily price" by removing the class to existing rows. My code is like this.</p>
  
  <pre><code>$(document).on('click','#nextPage',function(){ // Clicking Next Button.
      // Remove class to already existing class rows.
      $('.active').removeClass('active');     
      // Confused here. 
   });
  </code></pre>
  
  <p>Can you suggest me, guys? </p>