Create table form with jquery for multiple selections - php

Question

I have this loop which outputs data:
foreach ($userItems_get as $item => $value) {
if ($value['prefab'] == 'wearable') {
echo $value['name'] . "</br>";
echo "<img src=\"{$value['image_inventory']}.png\" width=\"90\" height=\"60\">" . "</br>";
if (!isset($value['item_rarity'])) {
$rarity = "common";
} else {
$rarity = $value['item_rarity'];
}
echo $rarity . "</br>";
foreach ($userItemsLoad as $key => $values) {
if ($item == $values['defindex']) {
echo $values['id'] . "</br></br>";
break;
}
}
}
}
I want it to display like this: http://puu.sh/l7gyH/afe812c4f3.jpg
for which i have this html:
<div class="item-container">
<div id="item-box">
<img src="http://lorempixel.com/output/technics-q-c-95-60-9.jpg" alt="">
<div id="rarity">
rare
</div>
</div>
Which ever items the user selects i want to gets it values['id'], the user maybe select multiple items at once.
I can create a normal checkpoint type input table but the user might have 1000's of items so it needs to this way like in the picture.
Is there a simple way to accomplish this? Thanks

Answer 1

<div class="item-container">
<div class="item-box" data-id="1234">
<img src="http://lorempixel.com/output/technics-q-c-95-60-9.jpg" alt="">
<div id="rarity">
rare
</div>
</div>
</div>
<script>
var selectedItems = [];
$('.item-box').on('click', function(e){
$(this).toggleClass('selected');
var selectedItems = []
$('.item-box.selected').each(function(i,o){
selectedItems.push($(this).data('id'))
})
});
</script>
Personally thought I would think about using AngularJS (https://angularjs.org/) for something like this, it will make your life a lot easier.