I have a dynamic list that I am displaying in a div as shown below
<div class="cards card1">
<div class="front">
<p>Front 1</p>
</div>
<div class="back1" style="display: none">
<p>Back 1</p>
</div>
</div>
<div class="cards card2" style="display: none">
<div class="front">
<p>Front 2</p>
</div>
<div class="back2" style="display: none">
<p>Back 2</p>
</div>
</div>
<div class="cards card3" style="display: none">
<div class="front">
<p>Front 3</p>
</div>
<div class="back3" style="display: none">
<p>Back 3</p>
</div>
</div>
When the page loads, only the first main div (card1) is displayed. There is a button called "Show". Clicking on this button shows the second sub-div (back1) of the first main div using jQuery. It also adds a class to the main div (card1) called 'visited'.
There is another button named "Next". When clicking on the "Next" button, I want to shuffle the remaining divs (card2, card3) and randomly display one of these two divs. The shuffling should exclude divs with the 'visited' class.
For example, if I click the reveal button for the first div and the 'visited' class is added to it (card1), there are two remaining divs without the 'visited' class. Clicking the "Next" button should show either card2 or card3, not card1 because it has the 'visited' class.
If the card3 div appears and I click on the "Next" button again, it should show the card3 div since it is the only one without the 'visited' class.
I have many such divs. Please assist me with this functionality.