JSFiddle - React, Tailwind, and code Playground

HTML

<!--thumbs--->
<a id="1a" href="#">1</a>
<a id="2a" href="#" class="ThumbClick">2</a>
<a id="3a" href="#" class="ThumbClick">3</a>
<a id="4a" href="#" class="ThumbClick">4</a>
<a id="5a" href="#" class="ThumbClick">5</a>
<a id="6a" href="#" class="ThumbClick">6</a>
<!--large photos--->
<img class="hide1" id="1b" src="../../images/fullsize/1000.jpg" />
<img class="hide1" id="2b" src="../../images/fullsize/1001.jpg" />
<img class="hide1" id="3b" src="../../images/fullsize/1002.jpg" />
<img class="hide1" id="4b" src="../../images/fullsize/1003.jpg" />
<img class="hide1" id="5b" src="../../images/fullsize/1004.jpg" />
<img class="hide1" id="6b" src="../../images/fullsize/1005.jpg" />

CSS

.hide1{
   display:none;
}
.show{
   display:block !important;
}

JavaScript

$(function(){
    $('.ThumbClick').click(function(e){
        var $id = this.id.replace('a','b');
    
        e.preventDefault();
        $('.show,#'+$id).toggleClass('show');
    });
});