JSFiddle - React, Tailwind, and code Playground

by Sean Coyne

HTML

<button data-id="1">Image 1</button><br>
<button data-id="2">Image 2</button><br>
<button data-id="3">Image 3</button><br>
<img id="theImage" class="hide">

CSS

.hide {
    display: none;
}

JavaScript

$(document).ready(function(){
    
    var images = {
        "1": "http://placekitten.com/g/200/300",
        "2": "http://placekitten.com/g/300/200",
        "3": "http://placekitten.com/g/400/600"
    };
    
    $("button").click(function(event){
        event.preventDefault();
        var id = $(this).data("id");
        var src = images[id];
        
        $("#theImage").attr("src", src).removeClass("hide");
        
    });

});