What I am trying to do is keep an image showing while I add a class and then remove the class after the next image is showing. For example:

Image shown -> Add Class to show another image -> Next Image shown -> Remove class of first image.

I think I have my function mostly there, just needs a bit of tweaking. I have tried rearranging the code several different ways, but to no avail. Can someone see where I am going wrong. I have removed the setInterval function so there is working code.

**HTML CODE**

```
<div class="thumbnails left">
    <ul>
        <li class="" data-id="0"><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
        <li data-id="1" class=""><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
        <li data-id="2" class=""><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
         <li data-id="3" class="active"><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
     </ul>
 </div>
 <div class="full left">
     <ul style="height: 483px;">
        <li class="" data-id="0"><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
        <li data-id="1" class=""><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
        <li data-id="2" class=""><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
        <li data-id="3" class="active"><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
     </ul>
 </div>

```

**JS CODE**

```
function setActiveImage(){
  $('.thumbnails ul > li').on('click', function(){
    var id = $(this).attr('data-id');
    if(!$(this).hasClass('active')){
        $('.thumbnails .active, .full .active').removeClass('active').stop();
        $('.thumbnails [data-id="'+id+'"], .full [data-id="'+id+'"]').addClass('active');
    }
  });
}

```