Every nth row in handlebars shows weird behaviour

Question

 {{#each orderData}}
{{#everyOther @key 4 }}
<div class="row">
    {{/everyOther}}

    <div class="col-md-3">
        <a class="aremove" href="/Channel/Details/{{getValueAtIndex ../channelIds @key}}" data-bypass>
        <div class="thumbnail">
            <img src="{{getImageSourceChannel ../channelNames @key name}}" class="">
            <div class="caption">
             <p><b>{{getObjectAtIndex ../channelNames @key}}</b></p>
             <p class="">{{this.slices.3.count}} new orders</p>
             <p class="">{{this.slices.0.count}} back orders</p>                   

         </div>
     </div>
 </a>
 </div>
 {{#everyOther @key 4 }}
</div>
 {{/everyOther}}

{{/each}}

Helper:

    Handlebars.registerHelper("everyOther", function (index, amount, scope) {
    if ( ++index % amount ) 
        return scope.inverse(this);
    else 
        return scope.fn(this);
});

I am printing 4 elements at a time. What happens is really weird out here the new orders data keeps changing from one column to another.

I don't understand why is it happening. When i refresh the page 4 times the behaviour shows up.

Please find below what happens:

1

2