Using {switch} to Repeat Divs at Intervals

Question

I have a loop of entries using a playa field to show multiple entries. I would like certain formatting to happen every 3 intervals. I found what I believe to be the solution to my issue here: https://stackoverflow.com/questions/13050550/how-can-i-insert-html-at-repeating-intervals-in-expressionengine

But something isn't working right. When I look at the result of my loop, there are too many closing divs. It looks like my opening switch statement is working the way i'd like, but the closing switch statement is incorrect. Could someone tell me what I'm doing wrong?

Here is the code in my template:

{playa_field show_future_entries="yes" show_expired="yes"}
    {switch="<div class='section-box add'><div class='outer-center'><div class='inner-center'>||"}
        <div class="box2">
            <img src="{event_banner_small}" width="336" height="196" alt="{title}" />
        </div>  
    {if row_count != total_rows}{switch="||</div></div></div>"}{/if}
    {if row_count == total_rows}</div></div></div>{/if}
{/playa_field}

Here are the results in the browser:

    <div class='section-box add'>
    <div class='outer-center'>
    <div class='inner-center'>
        <div class="box2">
            <img src="http://www.example.com/img.jpg" width="336" height="196" alt="example" />
        </div>  
    </div>
    </div>
    </div>                  
        <div class="box2">
            <img src="http://www.example.com/img.jpg" width="336" height="196" alt="example" />
        </div>  
    </div>
    </div>
    </div>          
        <div class="box2">
            <img src="http://www.example.com/img.jpg" width="336" height="196" alt="example" />
        </div>  
    </div>
    </div>
    </div>                  
    <div class='section-box add'>
    <div class='outer-center'>
    <div class='inner-center'>
        <div class="box2">
            <img src="http://www.example.com/img.jpg" width="336" height="196" alt="example" />
        </div>  
    </div>
    </div>
    </div>                  
        <div class="box2">
            <img src="http://www.example.com/img.jpg" width="336" height="196" alt="example" />
        </div>  
    </div>
    </div>
    </div>

Here is what I would like the outcome to be (lets say the total results are 5 in this case, but this number could be more or less depending on the channel entry):

     <div class='section-box add'>
     <div class='outer-center'>
     <div class='inner-center'>
            <div class="box2"> <!--entry 1-->
                <img src="{event_banner_small}" width="336" height="196" alt="{title}" />
            </div>  
            <div class="box2"> <!--entry 2-->
                <img src="{event_banner_small}" width="336" height="196" alt="{title}" />
            </div>              
            <div class="box2"> <!--entry 3-->
                <img src="{event_banner_small}" width="336" height="196" alt="{title}" />
            </div>  
     </div>
     </div>
     </div>
     <div class='section-box add'>
     <div class='outer-center'>
     <div class='inner-center'>
            <div class="box2"> <!--entry 4-->
                <img src="{event_banner_small}" width="336" height="196" alt="{title}" />
            </div>  
            <div class="box2"> <!--entry 5-->
                <img src="{event_banner_small}" width="336" height="196" alt="{title}" />
            </div>              
     </div>
     </div>
     </div>

Answer 1

Looks like I got it working. maybe this will help someone else out, or maybe someone will find an even better solution. I simply switched

{if row_count != total_rows} & {if row_count == total_rows}

to

{if count != total_results} & {if count == total_results}

so the final code in my template is:

{playa_field show_future_entries="yes" show_expired="yes"}
    {switch="<div class='section-box add'><div class='outer-center'><div class='inner-center'>||"}
        <div class="box2">
            <img src="{event_banner_small}" width="336" height="196" alt="{title}" />
        </div>  
    {if count != total_results}{switch="||</div></div></div>"}{/if}
    {if count == total_results}</div></div></div>{/if}
{/playa_field}