JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<div id="formone">


     <input type="radio" name="starrate" value="1.0" id="b"/>
    <label for="b"><img id="img1"  src="http://lorempixel.com/10/10"></label>

    <input type="radio" name="starrate" value="2.0" id="c">
    <label for="c" ><img id="img3"  src="http://lorempixel.com/10/10"></label>

    <input type="radio" name="starrate" value="3.0" id="d"/>
    <label for="d" ><img id="img5" src="http://lorempixel.com/10/10"></label>
   
    </div>
    
     <ul>
    <li>
        
           <img id="img2" src="http://lorempixel.com/10/10" style="position:absolute;display: none;">
           <img id="img4" src="http://lorempixel.com/10/10" style="position:absolute;display: none;">
           <img id="img6" src="http://lorempixel.com/10/10" style="position:absolute;display: none;">
        <br>
    </li>
</ul>

CSS

input[type="radio"] {
  display: none;
}

#img1, #img3, #img5 {
  width: 100px;
  height:100px;
 }
 
 #img2{
  bottom: 25px;
 }
  #img4 {
  bottom: 50px;
 }
   #img6 {
  bottom: 75px;
 }

.permanent {
  display: inline-block!important;
}

JavaScript

img1 = {
  node: $('#img1'),
  target: $('img[id=img2]'),
  clicked: false
};

img3 = {
	node: $('#img3'),
  target: $('img[id=img4]'),
  clicked: false
};

img5 = {
	node: $('#img5'),
  target: $('img[id=img6]'),
  clicked: false
};

function hideAllButThis(target) {
	$('img[id=img2], img[id=img4], img[id=img6]').hide();
  $(target).show(); 
}

function returnVisibility() {
	img1.clicked == false ? img1.target.hide() : img1.target.show();
	img3.clicked == false ? img3.target.hide() : img3.target.show();
	img5.clicked == false ? img5.target.hide() : img5.target.show();
}


$.each([img1, img3, img5], function( index, img ) {
  
  img.node.hover(function(){
    hideAllButThis(img.target);
  }, function(){
  	returnVisibility();
  });
  
  img.node.click(function(){
  	if (!img.clicked)
  	{ 
    	img.clicked = true;
    }
    else 
    {
    	img.clicked = false;
    }  
  })
  
});