JSFiddle - React, Tailwind, and code Playground

by Anton Spirin

HTML

<div class="container">
  <article>
   <img src="http://placehold.it/150x100" class="picture">
   <button class="btn">11</button>
  </article>
  <article>
    <img src="http://placehold.it/150x100" class="picture">
    <button class="btn">11</button>
  </article>
  <article>
    <img src="http://placehold.it/150x100" class="picture">
    <button class="btn">11</button>
  </article>
</div>

CSS

.active {
  border: 5px solid red;
}

JavaScript

var buttons = document.querySelectorAll('.btn');

Array.prototype.forEach.call(buttons, function(button) {
  button.addEventListener('click', function() {
    var picture = button.parentNode.querySelector('.picture');
    var isActive = picture.classList.contains('active');
    
    picture.classList.toggle('active', !isActive);
  });
});