JSFiddle - React, Tailwind, and code Playground

HTML

<div id="MainDiv">
        <img id="ship1" src="http://cdn-img.easyicon.net/png/154/15462.png" />
        <img id="ship2" src="http://cdn-img.easyicon.net/png/154/15462.png" />
        <img id="ship3" src="http://cdn-img.easyicon.net/png/154/15462.png" />

    </div>

CSS

#MainDiv
        {
            position:absolute;
        }
            #MainDiv img
            {
                position:absolute;
            }
        #ship1
        {
            top:10px;
            left:200px;
        }
        #ship2
        {
            top:210px;
            left:0px;
        }
        #ship3
        {
            top:210px;
            left:400px;
        }

JavaScript

var shipsArray = new Array();
       
$(document).ready(function () {
     shipsArray = ["1", "2", "3"];
            shuffle(1);
        });
        
        function shuffle(level) {
            
            for (i = 0; i < 30; i++) {
                var j = i % 3;
                
                var favorite = shipsArray[Math.floor(Math.random() * (shipsArray.length-1))];
                $("#MainDiv").append(j+"  "+favorite+"<br/>");
                if (j != favorite) {
                    var newposition = $("#ship" + shipsArray[favorite]).position();
                    var tempPosition = $("#ship" + shipsArray[j]).position();
                    $("#ship" + shipsArray[j]).animate({ "left": newposition.left, "top": newposition.top });
                    $("#ship" + shipsArray[favorite]).animate({ "left": tempPosition.left, "top": tempPosition.top });
                }

            }
        }