Spin inner elements of two div at the same time (and rate) with jquery

Question

I am trying to give two elements a matched spin animation, I want them to spin at the same rate and land on a "matched" set every time. I can get both elements to spin, but the variables get ran twice, throwing off the matching pairs.

I've tried setting up different functions for each element, and changing the variables to boot, but did not have success. In the latest iteration fo code, I am trying to use the 'this' variable, but am still having difficulties with the other variables causing each item to be counted twice.

Check Fiddle Here or code snippet below (console.log commented):

$(document).ready(function () {
    function moveTo(val) {
        val = -val % 300;
        if (val > 0) val -= 300;
        $(this).css({
            top: val
        });
    }

var i = 0;
    function spin(count) {
     var list = $(this).find('.viewbox ul');
     //console.log(list);
     var firstItem = list.find('.viewbox li:first');
     firstItem.clone().appendTo(list);
 
        $('.slots').stop().animate({
            top: -300
        }, 600, 'linear', function () {
            if (count == 0) {
             i++
             if (i <= 5){
                var slot = count * 6 + i,
                    top = -slot * 50,
                    time =  600 * slot / 6;
                //console.log(count, slot, top, time)
                $(this).css({
                    top: 0
                }).animate({
                    top: top
                },time)//, 'easeOutQuad')
                } else {i = 0}
            } else {
                $(this).css({
                    top: 0
                })
                spin(count - 1)
            };
        });
    }

 function spinTheThing(stop) { 
     $('.slots').css({
             top: 0
         }) 
   spin(1)
  }  
   
 (function(count) {
     if (count < 7) {
         spinTheThing();
         var caller = arguments.callee;
         window.setTimeout(function() {
             caller(count + 1);
         }, 4000);    
     }
 })(0);

});

.viewbox{
    overflow: hidden;
    height: 50px;
    border: solid 1px #000;
    position: relative;
    display: inline-block;
    }
.viewbox .wrapper{
    position: relative;
}
.viewbox ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.viewbox li{
    display: block;
    width: 300px;
    height: 50px;
    text-align: center;
    font-size: 30px;
}

<script src="https://code.jquery.com/jquery-1.10.1.min.js" integrity="sha256-SDf34fFWX/ZnUozXXEH0AeB+Ip3hvRsjLwp6QNTEb3k=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha256-H3cjtrm/ztDeuhCN9I4yh4iN2Ybx/y1RM7rMmAesA0k=" crossorigin="anonymous"></script>

<h1>
<span> Less </span>
<div class="viewbox">
 <div class="wrapper slots" id="slotmachine">
  <ul>
   <li style="background:#f00">"I can't"</li>
   <li style="background:#ff0">NO</li>
   <li style="background:#0f0">Huh?</li>
   <li style="background:#0ff">4</li>
   <li style="background:#00f">5</li>
   <li style="background:#f0f">6</li>
  </ul>
 </div>
</div>
<h1>

<h1>
<span> Less </span>
<div class="viewbox">
 <div class="wrapper slots" id="slotmachine2">
  <ul>
   <li style="background:#f00">"I can"</li>
   <li style="background:#ff0">YES</li>
   <li style="background:#0f0">YEAH!</li>
   <li style="background:#0ff">42</li>
   <li style="background:#00f">52</li>
   <li style="background:#f0f">62</li>
  </ul>
 </div>
</div>
<h1>