JSFiddle - React, Tailwind, and code Playground

HTML

<div id="show_area">large image here</div>
<div class="container1"> <a class="list" href="#">
            <img style="float:left;" src="/escher_full-150x150.png" width="150" height="150" />
            </a>

    <div class="search_desc"> <strong>Escher</strong>

        <br>
        <br>
        <!-- clicking explore_btn will load escher_full.png in the show_area div --> <a href="#"><img style="float:right;" src="/explore_btn.png"></a>

    </div>
</div>
<div class="container2"> <a class="list" href="#">
            <img style="float:left;" src="/footer_full-150x150.png" width="150" height="150" />
            </a>

    <div class="search_desc"> <strong>footer</strong>

        <br>
        <br> <a href="#"><img style="float:right;" src="/explore_btn.png"></a>

    </div>
</div>

JavaScript

$(document).ready(function () {
    $('.list img').on('click', function () {
        var old_img = this.src;
        var new_img = old_img.split('-150x150').join('')
        $('#show_area').html('<img src="' + new_img + '" />');
    });
    $('.search_desc img').on('click', function () {
        var origin = $(this).parents('div.search_desc').parent().find('img:first')[0];
        var old_img = origin.src;
        var new_img = old_img.split('-150x150').join('')
        $('#show_area').html('<img src="' + new_img + '" />');

    });
});