JSFiddle - React, Tailwind, and code Playground

by Aubrey Taylor

HTML

<ul class="js-thumb-list thumb-list">
  <li class="item" data-info="foo"></li>
  <li class="item" data-info="bar"></li>
  <li class="item" data-info="baz"></li>
</ul>

<div class="js-info info">
    <p class='js-info-text info-text'>Awaiting Selection</p>
</div>

CSS

.thumb-list{
 width:366px;
 height:122px;    
}

.thumb-list .item{
 float: left;
 width: 100px;
 height: 100px;
 border: 1px solid black;
 background: red;
 margin: 10px;
 cursor: pointer;
}

.info{
 padding-left: 10px;
 background: yellow;        
}

JavaScript

var jq_list     = $('.js-thumb-list');
var jq_items    = $('.js-thumb-list .item');
var jq_info     = $('.js-info');
var jq_infoText = jq_info.find('.js-info-text');

function updateView(str) {
    jq_infoText.text(str);
}
function onThumbClick(e) {
    var jq_this = $(this);
    var i       = jq_items.index(jq_this) + 1;
    var info    = jq_this.data('info');
    var result  = "You slected thumb " + i + ". It's info was " + info;

    updateView(result);
}

jq_items.each(function(i, el) {
    var jq_this = $(el);
    jq_this.bind('click', onThumbClick);
});