title: How to get the recommended slot?
body: <p>Okay at the moment I'm currently getting all the first elements with class <code>slot</code> which have enough elements after it with the same class with don't also have <code>.alreadyBooked</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
   addPopOverEvery(2, '.slot:not(.alreadyBooked)');
  });
  
  function addPopOverEvery(n, selector) {
   $(selector).each(function() {
    var $original = $(this),
    $self = $(this),
    $is_pop = true,
    i = 0;
    if ($original.prev().is(selector)) {
     for (i = 1; i &lt; n; i++) {
      $self = $self.prev();
      if (!$self.is(selector) || $self.find('.popOver').length) {
       $is_pop = false;
       break;
      }
     }
    }
    if ($is_pop) {
     $self = $original;
     for (i = 1; i &lt; n; i++) {
      $self = $self.next();
      if (!$self.is(selector)) {
       $is_pop = false;
       break;
      }
     }
    }
    if ($is_pop) {
     $original.append("&lt;div class='popOver'&gt;This slot would be recommended&lt;/div&gt;");
              $original.css("color", "green");
    }
   });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.popOver{
     width:400px;
     height: 30px;
     background: green;
     position: absolute;
     z-index: 999;
     margin-left: 120px;
     opacity: 0.5;
     color: white!important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul&gt;
    &lt;li class="slot"&gt;15:10 18/08/2016&lt;/li&gt;
    &lt;li class="slot"&gt;15:15 18/08/2016&lt;/li&gt;
    &lt;li class="slot alreadyBooked"&gt;15:20 18/08/2016&lt;/li&gt;
    &lt;li class="slot alreadyBooked"&gt;15:25 18/08/2016&lt;/li&gt;
    &lt;li class="slot"&gt;15:30 18/08/2016&lt;/li&gt;
    &lt;li class="slot"&gt;15:35 18/08/2016&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I want to be able to do the same but having it pick the recommended slot based on the slot time.</p>
  
  <p>E.g. </p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="slot"&gt;15:10 18/08/2016&lt;/li&gt; &lt;---- So this would be recommended 
    &lt;li class="slot"&gt;15:15 18/08/2016&lt;/li&gt;
    &lt;li class="slot alreadyBooked"&gt;15:20 18/08/2016&lt;/li&gt;
    &lt;li class="slot alreadyBooked"&gt;15:25 18/08/2016&lt;/li&gt;
    &lt;li class="slot"&gt;15:30 18/08/2016&lt;/li&gt; &lt;--- This would be accepted but not recommended because the slot time isn't the earliest
    &lt;li class="slot"&gt;15:35 18/08/2016&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>