JSFiddle - React, Tailwind, and code Playground

HTML

<lable>Title</lable>

<div id='container'>
    <img src="https://dl.dropbox.com/s/66ip1iz8cm3wf2l/dial.png" style="position:absolute;top:=;left:;" id="dial1"></img>
    <img src="https://dl.dropbox.com/s/siqq3e8kdaefqn8/icon_0.png" style="position:absolute;top:60px;left:190px;" id="dial2"></img>
    <img src="https://dl.dropbox.com/s/zikxwpakha2ei1v/icon_1.png" style="position:absolute;top:100px;left:100px;" id="dial3"></img>
    <img src="https://dl.dropbox.com/s/dn5n76r6yr1tzpd/icon_2.png" style="position:absolute;top:180px;left:70px;" id="dial4"></img>
    <img src="https://dl.dropbox.com/s/vu9uckyoo7k8wcc/icon_3.png" style="position:absolute;top:270px;left:70px;" id="1"></img>
    <img src="https://dl.dropbox.com/s/lnb9h4hazcd619u/icon_4.png" style="position:absolute;top:370px;left:110px;" id="dial5"></img>
    <img src="https://dl.dropbox.com/s/pt0q3zbdxt3843d/icon_5.png" style="position:absolute;top:420px;left:230px;" id="dial6"></img>
    <img src="https://dl.dropbox.com/s/j9ybktafm0v08ff/icon_6.png" style="position:absolute;top:350px;left:340px;" id="dial7"></img>
    <img src="https://dl.dropbox.com/s/nuh0njoeczd94gm/icon_7.png" style="position:absolute;top:250px;left:390px;" id="dial8"></img>
    <div>

CSS

#container img.active{
    border-width:5px;
    transform:scale(1.4);
}
#container img{
    transition:border 0.2s linear, transform 0.2s linear;
    border:0px solid yellow;
    border-radius:50%;
}

JavaScript

var arry =["a","b","c","d","e","f","g" ,"h"];

$(document).ready(function (e) {
    var timer = null;
    var animating = false;
    var unit = 200;

    var boxes = [{
        selector: '#dial2',
        angle: 90,
        finalAngle: 90,
        stop: false,
    }, {
        selector: '#dial3',
        angle: 45,
        finalAngle: 90,
        stop: false,
    }, {
        selector: '#dial4',
        angle: 315,
        finalAngle: 90,
        stop: false,
    }, {
        selector: '#dial5',
        angle: 270,
        finalAngle: 90,
        stop: false,
    }, {
        selector: '#dial6',
        angle: 225,
        finalAngle: 90,
        stop: false,
    }, {
        selector: '#dial7',
        angle: 135,
        finalAngle: 90,
        stop: false,
    }, {
        selector: '#dial8',
        angle: 0,
        finalAngle: 90,
        stop: false,
    }, {
        selector: '#1',
        angle: 180,
        finalAngle: 90,
        stop: false,
    }];

    $.each(boxes, function (idx, val) {
        val.currentAngle = val.angle;

        $(val.selector).on('click', function () {
            if (!val.stop) {
                console.log('box: ' + val.selector + ' will stop');
                val.stop = true;
            }
        });
    });

    var checkStop = function () {
        var stop = true;
        $.each(boxes, function (idx, val) {
            if (!boxes[idx].stopped) {
                stop = false;
            }
        });
        return stop;
    };

    var animate = function () {

        $.each(boxes, function (idx, val) {

            if (!boxes[idx].stopped) {

                var rad = boxes[idx].currentAngle * (Math.PI / 180);

                $(boxes[idx].selector).css({
                    left: 225 + Math.cos(rad) * unit + 'px',
                    top: unit * (1 - Math.sin(rad)) + 40 + 'px'
                });
                if (((boxes[idx].finalAngle - boxes[idx].currentAngle) % 360 == 0) && boxes[idx].stop == true) {
        ...