title: How to add a class on a dynamic range of elements - jQuery
body: <p>I'm trying to make<code>Date Range Picker</code> similar to <a href="http://www.daterangepicker.com/#ex2" rel="nofollow"><strong>this</strong></a>.</p>
  
  <p>I've tried using things like </p>
  
  <pre><code>     $('#calendar-dates').on('mouseover', 'td', function() {
           if($(this).html() &gt; window.start){
            $(this).addClass("added");
          }
       });
  
        $('#calendar-dates').on('click', 'td', function() {
          window.start = $(this).html(); // get the number of the day
  
          $(this).addClass("start"); // to mark it the date-selection start
  
        });
  </code></pre>
  
  <p>What I want is if I go <code>horizontally</code> with the mouse button over the <code>td</code> elements that come after <code>this day</code>, to highlight them with a <code>background-color</code></p>
  
  <p>OR</p>
  
  <p>if I go <code>vertically</code> to change the <code>background-color</code> of the previous row. </p>
  
  <p>I have read about <code>slice</code> but I can't think to understand how to utilize it properly.</p>
  
  <p>Also using <code>mouseover</code>, after a point it stops highlighting elements.</p>
  
  <p>Please help.</p>