JSFiddle - React, Tailwind, and code Playground

HTML

<p>
<img src="http://dummyimage.com/600x400/000/fff" id="images/USA/desert.jpg" class='miniature'>
<img src="http://dummyimage.com/600x400/000/fff" id="images/USA/dropdown_map.jpg" class='miniature'>
                <img src="http://dummyimage.com/600x400/000/fff" id="images/USA/pont.jpg" class='miniature'>
                <img src="http://dummyimage.com/600x400/000/fff" id="images/USA/statue.jpg" class='miniature'>
                <img src="http://dummyimage.com/600x400/000/fff" id="images/USA/whitehouse.jpg" class='miniature'><br />
                <img id="grand" src="http://dummyimage.com/600x400/000/fff" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            </p>

<p class='description' id="images_USA_desert">
1111
</p>
                    
<p class='description' id="images_USA_dropdown_map">
2222
</p>

CSS

.miniature {
    float:left;
    width:100px;
}

.description {
    display:none;
}

JavaScript

$(function() {
        $('.miniature').css('border','5px white solid');
        $('.miniature:first').css('border','5px black solid');
            
        $('.miniature').click(function() {
              $('.miniature').css('border','5px white solid');
              $(this).css('border','5px black solid');
            
              var nom = $(this).attr('id'); // for the slideshow
              $('#grand').attr('src',nom); // for the slideshow
            
            
            
              $('p.description').hide(); // Hide any blocks that are showing from previous clicks
              var textBlockId = '#' + nom.replace(/\//g, "\_").split('.')[0];
              $(textBlockId).show(); // For showing the text
        });
        
    });