JSFiddle - React, Tailwind, and code Playground

HTML

<div class ="submit" id="submit" >
    <input  type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb" onclick="posting_by_user('Dumb')" />
    <input  type="image" src="informative.png" value="Informative" class ="Informative" id="Informative" onclick="posting_by_user('Informative')"/>
    <input  type="image" src="brilliant.png" value="Brilliant" class ="Brilliant" id="Brilliant" onclick="posting_by_user('Brilliant')"/>
    <input  type="image" src="cool.png" value="Cool" class ="Cool" id="Cool" onclick="posting_by_user('Cool')"/>
</div>

JavaScript

window.addEventListener("load", function load (event) {
    window.removeEventListener("load", load, false);
    tieEvents();
}, false);

function tieEvents() {
        var button = document.getElementById('Dumb');
    
    button.addEventListener("mouseover", hovered, false);
    
    button.addEventListener("mouseout", unhovered, false);
    
    
    function hovered() {
        button.src = "anotherimg.png";
    }
    
    function unhovered() {
        button.src = "anotherimg.png";
    }
};