JSFiddle - React, Tailwind, and code Playground

JavaScript

var count=1;    		
        var x_data1 = 100;
		var y_data1 = 100;
		var data1 = [10,40,70,20,30];
		
		var x_data2 = 150;
		var y_data2 = 150;
		var data2 = [20,60,100,20];
		
		graph_circ(data1,x_data1,y_data1); //call function
        
        graph_circ(data2,x_data2,y_data2); //call function
		
		function graph_circ(data,x_circle,y_circle){
		
            var color = ["red", "green", "blue", "yellow", "pink", "gray","black"];
			var paper;
			var arc;
			var sectorAngleArr = [];
			var total = 0;
			var startAngle = 0;
			var endAngle = 0;
			var x1,x2,y1,y2 = 0;

			
				
			//CALCULATE THE TOTAL
			for(var k=0; k < data.length; k++){
				total += data[k];
			}
	
			 //CALCULATE THE ANGLES THAT EACH SECTOR SWIPES AND STORE IN AN ARRAY
		    for (var i = 0; i < data.length; i++) {
		      
				var angle = Math.ceil(360 * data[i] / total);
				sectorAngleArr.push(angle);
		    }
			
            
           	//**************create div dynamicaly****************
			var div = document.createElement("div");
			div.id="div"+count;
			div.style.width = "50%";
			div.style.height = "auto";
			//div.style.height = "auto";
			div.style.border = "1px solid #ccc";
			div.style.padding = "20px 10px";
			div.style.background = "red";
			div.style.cssFloat="left";
			//div.style.color = "black";
			//div.innerHTML = "Hello";
			div.style.position = "relative";
			document.body.appendChild(div);
			
			var div2 = document.createElement("div"); 
			div2.id="div_table"+count;
			div2.style.width = "40%";
			div2.style.height = "250px";
			div2.style.cssFloat="left";
			//div2.style.left = "50%";
			div2.style.background = "blue";
			div2.style.position = "relative";
			document.body.appendChild(div2);
			
			//**************create table dynamicaly***************
			var table = document.createElement('table');
			table.style.position = "absolute"
			//table.style.top = y_circle/2+"px";
			//table.style.left = x_circle*2.5+"px";
			table.style.textAlign =...