JSFiddle - React, Tailwind, and code Playground

HTML

<div class="radio">
    <input type="radio" name='thing' value='valuable' id="easy" />
</div>
<div class="radio">
    <input type="radio" name='thing' value='valuable' id="medium" checked="checked" />
</div>
<div class="radio">
    <input type="radio" name='thing' value='valuable' id="hard" />
</div>
<div id="easyDIV">
    <img src="http://lorempixel.com/g/400/200/sports" alt="If you can see this, then the image didn't load properly." id="sample" />
</div>
<div id="mediumDIV">
    <img src="http://lorempixel.com/g/400/200/food" alt="If you can see this, then the image didn't load properly." id="sample1" />
</div>
<div id="hardDIV">
    <img src="http://lorempixel.com/g/400/200/nature" alt="If you can see this, then the image didn't load properly." id="sample2" />
</div>

CSS

/* Hide elements initially */
#easyDIV,
#hardDIV{
    display:none;
}

JavaScript

// Get image divs
var $imageDivs = $('#easyDIV, #mediumDIV, #hardDIV');

// When a radio button is clicked
$('.radio input').on('click', function(){
	//Hide all image divs
    $imageDivs.css('display','none');
    
    //Then display the image div we want to see
    //To find that out we'll get the id of the current radio button
    var radioID = $(this).attr('id');
    
    //And then we'll display that image div
    $('#' + radioID + 'DIV').css('display','block');
    
});