JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
Test1
</div>

<div class="test">
Test2
</div>

<div class="test">
Test3
</div>

CSS

.test {
  height: 100px;
  width: 50px;
  background-color: red;
}

JavaScript

$(".test").click(function(){
    var angle;
    var matrix = $(this).css("-webkit-transform")
    if (matrix == "none") { //div hasn't been rotated yet
        angle = 0;
    }
    else {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0]; //should be -1 if div is upside down, 1 if it is normal.
        if(a == 1) { 
            $(this).removeAttr('style');
            angle = 0;
        }
        else {
            angle = 180;
        }   
    }
    $(this).css({
        "-webkit-transform": "rotate("+(angle+180)+"deg)",
        "-moz-transform": "rotate("+(angle+180)+"deg)",
        "transform": "rotate("+(angle+180)+"deg)",
        "-webkit-transition": "-webkit-transform 0.3s ease-in", 
    });
});