JSFiddle - React, Tailwind, and code Playground

HTML

<img alt="rating1" id="rating1" src="" />
<img alt="rating2" id="rating2" src="" />
<img alt="rating3" id="rating3" src="" />
<img alt="rating4" id="rating4" src="" />
<img alt="rating5" id="rating5" src="" />

JavaScript

function e(id) {
    return document.getElementById(id);
}

function changeimg_bw(ele) {
    alert(ele + " rating_bw.png");
}

function changeimg_color(ele) {
    alert(ele + " rating_color.png");
}

for (var i = 1; i <= 5; i++) {
    var img = 'rating' + i;
    (function (img) {
        e(img).addEventListener('mouseover', function (event) {
            changeimg_color(img);
        });
        e(img).addEventListener('mouseout', function (event) {
            changeimg_bw(img);
        });
    })(img);
}