How is it that my image will only flip once?

4 images are displayed and it’s suppose to flip the image horizontally on click and swap image with another by using the arrow indicator. The image swap is working, but the image will only flip once.

Below is my code, how is it not possible to flip the image multiple times?

I’ve tried several thing and I can’t seem to get it working.. HELP!

<body>
    <h1>My Images Gallery</h1>


    
Winter view

Make the image just like this by clicking and moving the tiles

</div> <table> <tr> <td id="a"> <img id="imga" src="right-top.jpg" alt="Winter view" onclick="flip('imga')">
Right top tile
</td> <td id="pijlTop" class="pijl"> <span onclick="swap('a', 'b')">&#8644</span> </td> <td id="b">
Winter view
Left top tile
</td> </tr> <tr> <td id="pijlLeft" class="pijl"> <span onclick="swap('a', 'c')">&#8645</span> </td> <td/> <td id="pijlRight" class="pijl"> <span onclick="swap('b', 'd')">&#8645</span> </td> </tr> <tr> <td id="c">
Winter view
Right bottom tile
</td> <td id="pijlBottom" class="pijl"> <span onclick="swap('c', 'd')">&#8644</span> </td> <td id="d"> <img id="imgd" src="left-down.jpg" alt="Winter view" onclick="flip('imgd')">
Left bottom tile
</td> </tr> </table> function flip(a) { var img = document.getElementById(a); if (img.style === 'img'){ img.style = "transform:rotate(180deg);"; } else { img.style = "transform:rotate(180deg);"; } } function swap(a, b) { var atext = document.getElementById("text" + a).innerHTML; var btext = document.getElementById("text" + b).innerHTML; var aimg = document.getElementById("img" + a).src; var bimg = document.getElementById("img" + b).src; document.getElementById("text" + a).innerHTML = btext; document.getElementById("text" + b).innerHTML = atext; document.getElementById("img" + a).src = bimg; document.getElementById("img" + b).src = aimg; } </body>

Source: stackoverflow-javascript