JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "div">
    <img src="http://placehold.it/100&text=1" class="rp" data-rotate="0">
    <img src="http://placehold.it/100&text=2" class="rp" data-rotate="0">
    <img src="http://placehold.it/100&text=3" class="rp" data-rotate="0">
</div>

CSS

.rp[data-rotate="0"] {
    border:10px solid #FF0000;
}
.rp[data-rotate="90"] {
    border:10px solid #00FF00;
}
.rp[data-rotate="180"] {
    border:10px solid #0000FF;
}
.rp[data-rotate="270"] {
    border:10px solid #00FF00;
}

JavaScript

$().ready(function() {
    $(".rp").click(function() {
        var rot = (parseInt($(this).attr("data-rotate"))+90)%360;
        $(this).attr("data-rotate",rot);
        $(this).css("-webkit-transform", "rotate("+rot+"deg)");
        $(this).css("-moz-transform", "rotate("+rot+"deg)");
    });
});