JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="first"></div>
<div class="second"></div>
<input type="submit" id="byBtn" value="Change"/>

CSS

.system {
    position: relative;
    width: 100px;
    height: 100px;
    padding: 30px;
    display: inline-block;

}

.planet {
    position: relative;

    width: 100%;
    height: 100%;

    border-radius: 50%;
    background-color: dimgrey;
}

.ship {

    /*
       height : Largeur des vaisseaux
       top : décalage de 50% - (height/2 + border)
       width : décalage de 50% + altitude
       margin: altitude
     */

    width: calc(50% + 20px);
    top: calc(50% - 13px);
    height: 20px;

    position: absolute;
    transform-origin: 0% 50%;
    left: 50%;

    /* Default css */
    border-radius: 30%;
    border: solid transparent 3px;
    border-right: solid black 3px;
}

@keyframes spin {
    100% { transform:rotate(360deg);}
}

JavaScript

function Planet(diameter, revolutionTime, planetColor, shipColor) {
    this.planetColor = planetColor || 'black';
    this.shipColor = shipColor || 'black';
    this.revolutionTime = revolutionTime || 10;
    this.diameter = diameter || 100;

    this.isLoad = false;

    this.system;
    this.planet;
    this.ships = [];

    this.dateLastAdd;

    this.loadDOMElement = function() {
        this.system = $("<div class='system'></div>");
        this.planet = $("<div class='planet'></div>");
        this.planet.appendTo(this.system);
        this.isLoad = true;
        this.refreshDOMElement();
    }

    this.refreshDOMElement = function() {
        if (!this.isLoad) {
            return;
        }

        var size = this.diameter + 'px';
        this.system.css({
            'width':size,
            'height':size
        });

        this.planet.css({
            'background-color': this.planetColor
        });

        this.refreshAllShipCSS();
    }

    this.refreshAllShipCSS = function() {
        var bufThis = this;
        this.ships.forEach(function (ship) {
            bufThis.refreshShipCSS(ship);
        });
    }

    this.addShipTest1 = function() {
        this.revolutionTime += 0.5;
        this.stopAllShipCSS();
        this.addShip()
    }

    this.addShipTest2 = function() {
        this.revolutionTime += 0.5;
        this.stopAllShipCSS();

        var save = this;
        setTimeout(function() {
            save.addShip();
        }, 100);
    }

    this.refreshShipCSS = function(ship) {
        var index = jQuery.inArray(ship, this.ships);
        if (index == -1){
            return;
        }
        var speed = this.revolutionTime/this.ships.length;
        var time = -(index*speed);
        ship.css({
            'animation':"spin " + this.revolutionTime + "s linear infinite",
            'border-right': "solid " + this.shipColor + " 3px",
            'animation-delay': time+ 's'
        });
    }

    this.stopAllShipCSS =...