JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.createjs.com/easeljs-0.6.0.min.js" type="text/javascript" ></script>

<canvas data-init="canvas360" id="render1" data-icon-path="images/" width="520" height="520" data-start-frame=0 data-file-count=22 data-file-path="watch1/"></canvas>


<canvas data-init="canvas360" id="render2" data-icon-path="images/" width="520" height="520" data-start-frame=0 data-file-count=22 data-file-path="watch2/"></canvas>

CSS

body{

    background: #eeeeee;

}

canvas{
    background: grey;
}

JavaScript

(function( $ ){


        var canvasApp = {
          reInit: function(){
            this.loaded = 0;//reset
            this.render();
            this.load360Image(false);
          },
          setCursor: function(cursor){
            document.body.style.cursor = cursor;
          },
          render: function(){
            //load in a new render
            this.fileCount = this.el.data("file-count");
            this.path = this.el.data("file-path");
            this.startFrame = 10;

            //create img list
            this.imgList = [];
            for (i = 1; i <= this.fileCount; i++) { 
              this.imgList.push(this.path+i+".png");
            }

            this.totalFrames = this.imgList.length;
          },
          start: function(element){ 
            var self = this;
            console.log(element);
            this.el = element;

            this.canvas = this.el[0];
            if (!this.canvas || !this.canvas.getContext){ 
              return;
            }
         
            this.stage = new createjs.Stage(this.canvas);  
            this.stage.enableMouseOver(true);
            this.stage.mouseMoveOutside = true; 
            createjs.Touch.enable(this.stage);

            this.images = [];
            this.loaded = 0;
            this.currentFrame = 0
            this.rotate360Interval;
            this.start_x;

            this.bg = new createjs.Shape();
            this.stage.addChild(this.bg);  

            this.bmp = new createjs.Bitmap();    
            this.stage.addChild(this.bmp);

            var myTxt = new createjs.Text("HTC One", '24px Ubuntu', "#ffffff");
            myTxt.x = myTxt.y =20;
            myTxt.alpha = 0.08;
            this.stage.addChild(myTxt);

            this.setCursor("progress");

            this.render();
            this.load360Image(true);

            // TICKER
            createjs.Ticker.addEventListener("tick", function(event){ 
              self.stage.update();
           ...