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' );
        
        // Finding path extension
        
        var extension = src.split( '.' ).pop();
        
        src = src.substr(
            
            0, src.lastIndexOf( '.' )
        ) + '_big.' + extension;
        
        // Replacement

        img.attr( 'src', src );
        
        e.preventDefault();
    });
});