JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
  <ul>
    <li>
      <img src="https://placehold.it/50x50&text=01">
    </li>
    <li>
      <img src="https://placehold.it/50x50&text=02">
    </li>
    <li>
      <img src="https://placehold.it/50x50&text=03">
    </li>
  </ul>
</div>

CSS

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 1rem;
}
.highlight {
  border: 2px solid red;
}

JavaScript

// Get all items.
var items = document.querySelectorAll( '.items li' );

// Adding/removing selection style via a CSS class.
function addHighlight() { 
	
  // Loop through all items and remove the selection class.
  for ( var i = 0, len = items.length; i < len; i++ ) {
  	items[i].className = items[i].className.replace( 'highlight', '' );
  }
  
  // Add selection class to selected item.
  this.className += ' highlight';
  
}

// Add click event handler to items.
function addEventListener( items, event, listener ) {
    for ( var i = 0, len = items.length; i < len; i++ ) {
        items[ i ].addEventListener( event, listener );
    }
}

addEventListener( items, 'click', addHighlight );