How do I display image input results on same page?

I am trying to figure out to display image input results from a little card game I created.

The game: http://ift.tt/2xVJUAq

How the game works: There are 4 categories, each category has 9 cards. The user must select one card from each category. At first, all the cards are selected, then the user deselects each card one by one until he has one remaining card, which serves as his final pick for that category. Once the user makes his final card decision for all 4 categories, he clicks the “generate results” button, which takes the user to the last part of the game. Here is where I’d like to automatically display the 4 final chosen images. But I’m not sure what is the best route to have those results

Currently I’m using a “shopping cart” feature—when the user lands on his final card for that category, user must hover mouse over the upper right hand corner for a pink star to be displayed. Clicking the pink star “adds” the card to the “cart” which can be seen upon clinking the “generate results” button. I don’t like this added step to the game, but it does work how I want it to. You can see only one card from each category is displayed in the “cart” section

Right now, all the cards are defaulted to "checked" input checkboxes. Clicking a card unchecks the card. How do I display the one remaining checked image in the results? Does this call for a php submit form thing? Or can we stick with javascript?

Thanks!