Use Kendo UI Flip Effects / Combined Effects for multiple items on the same page

I need to use kendo ui to display between 6-60 items. Each using the flip effect here http://ift.tt/1BJWV9u

The products will be loaded from the database with the unique id like this:

<div class="row">
<div class="col-md-4 product-container">
    <div id="productID1" class="productID">
        <div class="product">
            <div id="product-back1" class="product-desc">
                <p>BACK</p>
            </div>
            <div id="product-front1" class="product-image">
                <p>FRONT</p>
            </div>
        </div>
    </div>
</div>
<div class="col-md-4 product-container">
    <div id="productID2" class="productID">
        <div class="product">
            <div id="product-back2" class="product-desc">
                <p>BACK</p>
            </div>

            <div id="product-front2" class="product-image">
                <p>FRONT</p>
            </div>
        </div>
    </div>
</div>
<div class="col-md-4 product-container">
    <div id="productID3" class="productID">
        <div class="product">
            <div id="product-back3" class="product-desc">
                <p>BACK</p>
            </div>
            <div id="product-front3" class="product-image">
                <p>FRONT</p>
            </div>
        </div>
    </div>
</div>

The problem is I need multiple panels on the page how can I make each "front" and "back" click unique.

   var el = kendo.fx($('div[id^=productID]')),
    flip = el.flip("horizontal", $('div[id^=product-front]'), $('div[id^=product-back]')),
    zoom = el.zoomIn().startValue(1).endValue(1);

flip.add(zoom).duration(200);

$('div[id^=product-front]').click(function () {
    flip.stop().play();
});

$('div[id^=product-back]').click(function () {
    flip.stop().reverse();
});

I've tried loading each item into an array but have not found a good way to assure the correct item will be flipped.