JSFiddle - React, Tailwind, and code Playground

by sptx457

HTML

<p class="item">
  <img id="superdog" class="hide-item" src="https://s-media-cache-ak0.pinimg.com/736x/96/e4/34/96e434db8906125b7ea5a94ea070785f.jpg" />
</p>

<p class="item">
  <img id="rucksack" class="hide-item" src="https://s-media-cache-ak0.pinimg.com/736x/12/90/0a/12900aaf8340427901419c52c893dab6.jpg" />
</p>

<p class="item">
  <img id="ocarina" class="hide-item" src="https://www.zeldadungeon.net/Zelda05/Items/OcarinaofTime_Large.png" />
</p>

<p class="item">
  <img id="rupee" class="hide-item" src="http://static4.wikia.nocookie.net/__cb20120501010503/zeldafanon/images/3/37/RedRupee.png" style="width: 40px;" />
</p>

<p class="item">
  <img id="crown" class="hide-item" src="http://vignette2.wikia.nocookie.net/zelda/images/4/45/Ocarina_of_Time_Artwork_Goron's_Bracelet_(Artwork).png/revision/latest?cb=20160423104411" />
</p>

<p class="item">
  <img id="heart" class="hide-item" src="http://vignette2.wikia.nocookie.net/fantendo/images/d/d4/Heart_contener.png/revision/latest?cb=20130921193535" />
</p>
<br><br>

  <img data-item="superdog" class="selected" src="https://s-media-cache-ak0.pinimg.com/736x/96/e4/34/96e434db8906125b7ea5a94ea070785f.jpg" />

  <img data-item="rucksack" class="selected" src="https://s-media-cache-ak0.pinimg.com/736x/12/90/0a/12900aaf8340427901419c52c893dab6.jpg" />

  <img data-item="ocarina" class="selected"  src="https://www.zeldadungeon.net/Zelda05/Items/OcarinaofTime_Large.png" />

  <img data-item="rupee" class="selected"  src="http://static4.wikia.nocookie.net/__cb20120501010503/zeldafanon/images/3/37/RedRupee.png" style="width: 40px;" />

  <img data-item="crown" class="selected" src="http://vignette2.wikia.nocookie.net/zelda/images/4/45/Ocarina_of_Time_Artwork_Goron's_Bracelet_(Artwork).png/revision/latest?cb=20160423104411" />

  <img data-item="heart" class="selected"  src="http://vignette2.wikia.nocookie.net/fantendo/images/d/d4/Heart_contener.png/revision/latest?cb=20130921193535" />

CSS

.item {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  display: inline-block;
  margin: 20px;
}

img {
  width: 60%;
  display: block;
  margin: 20px auto;
}

.hide-item {
  display: none;
}

.selected {
  max-width: 40px;
  height: 40px;
  display: inline-block;
  margin: 0 15px;
  cursor: pointer;
}

JavaScript

var backpack = {
	superdog: "", 
  rucksack: "", 
  ocarina: "", 
  rupee: "", 
  crown: "", 
  heart: ""
};

$(".selected").click(function() {
  for (var properties in backpack) {
		alert(backpack[properties]);
  }
});