在旋转div中显示来自循环的数据（java）

Question

我有一个foreach循环（jstl），我希望循环中的每个数据都显示在旋转的div类中。

当前，我有此代码。

<c:forEach var="myItems" items="${myItems}" varStatus="i" begin="0" step="1">
<div class="myCard">
    <div class="card-rotate">
        <div class="front"> --- show first data from the loop
            <p>${myItems.getId()}</p>
            <p>${myItems.getName()}</p>
            <p>${myItems.getCountry()}</p>
        </div>
        <div class="back"> --- show next data from the loop
            <p>${myItems.getId()}</p>
            <p>${myItems.getName()}</p>
            <p>${myItems.getCountry()}</p>
        </div>
    </div>  
</div>
</c:forEach>

JS：

$(document).ready(function () {
        setInterval(function () {
            $('.card-rotate').toggleClass('flipped');
        }, 5000);
});

我想要翻转时的正面和背面卡片以获取循环中的下一个数据。我该怎么做？