JSFiddle - React, Tailwind, and code Playground

by Vitaly Sivkov

HTML

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<ul>
  <li data-id="111"><img src="http://goo.gl/wbz6rO"></li>
  <li data-id="222"><img src="http://goo.gl/wbz6rO"></li>
  <li data-id="333"><img src="http://goo.gl/wbz6rO"></li>
  <li data-id="444"><img src="http://goo.gl/wbz6rO"></li>
</ul>
<div id="details"></div>

CSS

ul li{
  border: 1px solid #ddd;
  cursor: pointer;
  display: inline-block;
  list-style: none;
}

#details{
  border: 1px solid #ddd;
  padding: 20px;
}

JavaScript

jQuery(function($){
	
  var $details = $('#details');
  
  $('ul li').click(function(){
  	var id = $(this).data('id');
    $details.html('Выбран предмет с ID='+ id);
  })

});