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");
}

function addImgListeners(img) {
    e(img).addEventListener('mouseover', function(event) {
        changeimg_color(img);
    });
    e(img).addEventListener('mouseout', function(event) {
        changeimg_bw(img);
    });
}

for(var i=1; i<=5; i++) {
    addImgListeners("rating" + i);
}