JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div class="test">
 
       
      
        
                
                <div class="buttonpf">test</div>
        
        <br>
            
                <div class="buttonpf">you</div>
               
            <br>
            
                <div class="buttonpf">go</div>
               <br>
  
</div>

CSS

.test { padding: 10px 0 0 10px; }
.buttonpf{  border:none;
      background: url('https://appconnect.cdxlife.com/webapp/assets/images/select_button-OFF.png') no-repeat top left;
      background-size: 197px 200px;
      width: 200px;
      height: 200px }
.pfclicked {
     background: url('https://appconnect.cdxlife.com/webapp/assets/images/select_button-ON.png') no-repeat top left;
    background-size: 197px 200px;
}

JavaScript

$('.buttonpf').click(function () {
  $('.buttonpf').not(this).removeClass('pfclicked');    
  $(this).toggleClass('pfclicked');
});