title: Add Class for <LI> on prev and next click
body: <p>How to add class for list li tag simultaneously when click on next and prev button.</p>
  
  <p>on click of next and prev the active class should add and remove simultaneously for li.</p>
  
  <p>Can anybody solve this issue.</p>
  
  <p>Thanks in advance :)</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() {
    $(".divs div").each(function(e) {
      if (e != 0)
        $(this).hide();
  
    });
  
    $("#next").click(function() {
      $(".list li").addClass("active");
      if ($(".divs div:visible").next().length != 0)
        $(".divs div:visible").next().show().prev().hide();
      else {
        $(".divs div:visible").hide();
        $(".divs div:first").show();
      }
      return false;
    });
  
    $("#prev").click(function() {
  
      if ($(".divs div:visible").prev().length != 0)
        $(".divs div:visible").prev().show().next().hide();
      else {
        $(".divs div:visible").hide();
        $(".divs div:last").show();
      }
      return false;
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.active {
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="divs"&gt;
    &lt;div class="cls1"&gt;1&lt;/div&gt;
    &lt;div class="cls2"&gt;2&lt;/div&gt;
    &lt;div class="cls3"&gt;3&lt;/div&gt;
    &lt;div class="cls4"&gt;4&lt;/div&gt;
    &lt;div class="cls5"&gt;5&lt;/div&gt;
    &lt;div class="cls6"&gt;6&lt;/div&gt;
    &lt;div class="cls7"&gt;7&lt;/div&gt;
  &lt;/div&gt;
  &lt;ul class="list"&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;a id="next"&gt;next&lt;/a&gt;
  &lt;a id="prev"&gt;prev&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>