JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first page">
    <img class="image" id="img1" src="../img/Album1/ae_1.jpg">
    <img class="image" id="img2" src="../img/Album1/gr_2.jpg">
    <img class="image" id="img3" src="../img/Album1/gr_3.jpg">
</div>
<div class="first page">
    <img class="image" id="img4" src="../img/Album1/r_4.jpg">
    <img class="image" id="img5" src="../img/Album1/we_5.jpg">
    <img class="image" id="img6" src="../img/Album1/f_6.jpg">
    <img class="image" id="img7" src="../img/Album1/f_7.jpg">
</div>

CSS

.img {
    height:30px;
    width:30px;
    background:blue;
    margin-left:10px;
}
.selected {
    -moz-box-shadow: 0 0 7px 4px blue;
    -webkit-box-shadow: 0 0 7px 4px blue;
    box-shadow: 0 0 7px 4px blue;
}

JavaScript

var level = 1;
$('img').each(function () { 
    $(this).attr('src', '../img/Album1/' + level + '_' + $(this).attr('id').substr(3) + '.jpg'); 
});