Add Class for on prev and next click

How to add class for list li tag simultaneously when click on next and prev button.

on click of next and prev the active class should add and remove simultaneously for li.

Can anybody solve this issue.

Thanks in advance :)

$(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;
    });
});

.active{color:red;}

<script src="http://ift.tt/1oMJErh"></script>
<div class="divs">
    <div class="cls1">1</div>
    <div class="cls2">2</div>
    <div class="cls3">3</div>
    <div class="cls4">4</div>
    <div class="cls5">5</div>
    <div class="cls6">6</div>
    <div class="cls7">7</div>
</div>
<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<a id="next">next</a>
<a id="prev">prev</a>