Отображение данных из цикла во вращающемся 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);
});

Я хочу, чтобы лицевая и обратная карты при переворачивании имели следующие данные из цикла.Как мне это сделать?