JSFiddle - React, Tailwind, and code Playground

HTML

<div class="storeitem">
    <div class="photos">
        <div id="div1" class="targetDiv">Photo 1</div>
        <div id="div2" class="targetDiv" style="display:none;">Photo 2</div>
        <div id="div3" class="targetDiv" style="display:none;">Photo 3</div>
    </div>
    <div class="thumbs">
        <ul>
            <li><a class="showFull" data-target="1">1</a></li>
            <li><a class="showFull" data-target="2">2</a></li>
            <li><a class="showFull" data-target="3">3</a></li>
        </ul>
    </div>
</div><!--end store item 1-->

<div class="storeitem">
    <div class="photos">
        <div id="div1" class="targetDiv">Photo 1</div>
        <div id="div2" class="targetDiv" style="display:none;">Photo 2</div>
        <div id="div3" class="targetDiv" style="display:none;">Photo 3</div>
    </div>
    <div class="thumbs">
        <ul>
            <li><a class="showFull" data-target="1">1</a></li>
            <li><a class="showFull" data-target="2">2</a></li>
            <li><a class="showFull" data-target="3">3</a></li>
        </ul>
    </div>
</div><!--end store item 2-->

CSS

.storeitem {
    float:left;
    border:1px solid black;
    height:auto;
    margin:10px;
}

.targetDiv {
    background-color:gray;
    width:100px;
    height:200px;
}
.thumbs {
    text-align:center;
    width:100%;
    float:left;
}
.thumbs ul {
    display:inline-block;
    margin:0;
    padding:0;
    list-style:none;
}

.thumbs li {
    float:left;
    padding:5px;
}
.thumbs a {
    width:20px;
    height:20px;
    background-color:pink;
    float:left;
}

JavaScript

$(function(){
    $('.showFull').click(function() {
        $(this).parents('.storeitem').find('.targetDiv').hide();
        $(this).parents('.storeitem').find('#div' + $(this).data('target')).show();
    });   
});