JSFiddle - React, Tailwind, and code Playground

by Vitaly Sivkov

HTML

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<ul id="list"></ul>
<div id="details"></div>

CSS

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

JavaScript

jQuery(function($){
	
  var $details = $('#details');
  var $list = $('#list');
  var data = [];
  
  $.ajax({
  	method: 'GET',
  	url: '/',
  	success: function(response){
      //тут data должно присваиваться значение response, 
      //но т.к. адрес не существующий, подставляем тестовые данные
      data = [
        {id:111, name:"Товар 1"}, 
        {id:222, name: "Товар 2"},
        {id:333, name: "Товар 3"},
        {id:444, name: "Товар 4"}
      ];
      renderList();
  	}
  });
  
  $('body').on('click', 'ul li', function(){
  	var id = $(this).data('id');
    var item = findItem(id);
    $details.html('Выбран предмет '+ item.name +' (ID='+ item.id +')');
  })

  function findItem(id){
		for(var i = 0; i < data.length; i++){
    	var item = data[i];
      if(item.id == id){
      	return item;
      }
    }
  }

	function renderList(){
  	console.log(data);
  	data.forEach(function(item){
    	$list.append('<li data-id="'+ item.id +'"><img src="http://goo.gl/wbz6rO"></li>');
    });
  }

});