JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gallery-warper" >

    <div class="img-container" >
        <img src="img/gallery/work/001.png" alt="" width="100%" />
    </div>

    <div class="img-container" >
        <img src="img/gallery/work/002.jpg" alt="" width="100%" />
    </div>

    <div class="img-container" >
        <img src="img/gallery/003.jpg" alt="" width="100%" />
    </div>

    <div class="img-container" >
        <img src="img/gallery/004.jpg" alt="" width="100%" />
    </div>
</div>

JavaScript

$( document ).ready( function() {

    $( '.img-container' ).click( function( e ) {
        
        // IMG Element
        
        var img = $( this ).children();
        
        // IMG SRC Attribute
        
        var src = img.attr( 'src' );
        
            src = src.substr(
                
                0, src.lastIndexOf( '.' )
            ) + '_big.jpg';
        
        // Replacement
        
        img.attr( 'src', src );
        
        e.preventDefault();
    });
});