JSFiddle - React, Tailwind, and code Playground

HTML

<img id="logo_layer2" src="images/logo/logo_compass_a_layer2_red.png">

<ul id="letters">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
        <li>L</li>
        <li>M</li>
        <li>N</li>
        <li>O</li>
        <li>P</li>
        <li>Q</li>
        <li>R</li>
        <li>S</li>
        <li>T</li>
        <li>U</li>
        <li>V</li>
        <li>W</li>
        <li>X</li>
        <li>Y</li>
        <li>Z</li>
    </ul>

CSS

#letters li   {
    list-style: none;
    display: inline-block;
    text-align: center;
    padding-bottom: 2px;
    background: #fff;
    height: 14px;
    width: 15px;
    border:  1px solid #858585;
}

#letters li:hover   {
    outline:2px solid #fff;
    cursor:pointer;     
}

JavaScript

events: {
        "click #letters li" : "change_letter"
    },

    change_letter: function(e) {
		var letter = $(e.target).text();       
        var newimg = /images\/logo\/logo_\w*_\w{1}_layer\d_\w*.png/.replace((/\w{1}/,letter));
        $("#logo_layer2").attr("src",newimg);
    },