JSFiddle - React, Tailwind, and code Playground

by denov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
<ul>
  <li id='item1'>
    <img src='https://dummyimage.com/100x100/000/fff'/>
  </li>

  <li id='item2'>
    <img src='https://dummyimage.com/100x100/000/fff'/>
  </li>
  
  <li id='item3'>
    <img src='https://dummyimage.com/100x100/000/fff'/>
  </li>
</ul>

CSS

ul{margin:0;padding:0}
li{float:left;list-style-type:none}
img{margin-left:5px}
.selected img{border:3px solid red}

JavaScript

// selected
function setStyle(node) {
    node.siblings().removeClass('selected')
    node.addClass('selected');
}

function startup() {
		var defaultId = 'item1';
        lastId = localStorage.getItem('keep_track_example') || defaultId;            

    $('li').on('click', function(){
        setStyle($(this));
        localStorage.setItem('keep_track_example', $(this).attr('id'));
    })

    setStyle($('#'+lastId));    
}


startup();