JSFiddle - React, Tailwind, and code Playground

by Vitorino fernandes

HTML

<form class="num-players-group" action="">
    <input type="hidden" id='testbutton'> <a href="#" class="players2">
    <img src="http://cdn.flaticon.com/png/256/20661.png" style="display:inline-block" class="player-btn" alt="2 off" />
    <img src="http://cdn.flaticon.com/png/256/20664.png" style="display:none" class="player-btn" alt="2" />
  </a>
 <a href="#" class="players3">
    <img src="http://cdn.flaticon.com/png/256/20661.png" style="display:inline-block" class="player-btn" alt="3 off" />
    <img src="http://cdn.flaticon.com/png/256/20664.png" style="display:none" class="player-btn" alt="3" />
  </a>
 <a href="#" class="players4">
    <img src="http://cdn.flaticon.com/png/256/20661.png" style="display:inline-block" class="player-btn" alt="4 off" />
    <img src="http://cdn.flaticon.com/png/256/20664.png" style="display:none" class="player-btn" alt="4" />
  </a>

</form>

CSS

img {
    width:50px;
    height:50px;
}

JavaScript

$('.num-players-group a').click(function () {
        $(this).children('img').toggle();
    });