JSFiddle - React, Tailwind, and code Playground

HTML

<div id="smallImages"><img id="thumb_1" alt="foo1"/></div>
<div id="smallImages"><img id="thumb_1" alt="fo3"/></div>
<div id="smallImages"><img id="thumb_1" alt="foo31"/></div>
<div id="smallImages"><img id="thumb_1" alt="foo441"/></div>
<div id="smallImages"><img id="thumb_1" alt="foo441"/></div>
<div id="smallImages"><img id="thumb_1" alt="foo441"/></div>
<div id="smallImages"><img id="full_2" alt="foo441"/></div>
<br />

<div id="bigImages"><img id="full_1" alt="foo1" style="display:none"/></div>

JavaScript

document.getElementById("smallImages").onclick = function(e) {
    if(e.target.tagName.toLowerCase() == 'img') {
        var imgNumber = e.target.id.split("_")[1];   
        document.getElementById("full_" + imgNumber).style.display = 'block';
    }
};