JSFiddle - React, Tailwind, and code Playground

HTML

<section class="row" style="margin: 0px auto;">
  <canvas id="a" width=1000 height=350></canvas>
  <canvas id="b" width=1000 height=350></canvas>
  <canvas id="c" width=1000 height=350></canvas>
  <canvas id="d" width=1000 height=350></canvas>
  <canvas id="e" width=1000 height=350></canvas>
  <canvas id="f" width=1000 height=350></canvas>
  <canvas id="g" width=1000 height=350></canvas>
  <canvas id="h" width=1000 height=350></canvas>
  <canvas id="i" width=1000 height=350></canvas>
<img src="original.png" class="ogimg" id="ogimg"/> 
<img src="shadow.png" class="high" id="high"/> 
<img src="bulldozer-mocha.png" name="bulldozer-mocha.png" onclick="drw(this)">
<img src="bulldozer.png" name="bulldozer.png" onclick="drw_cushion(this)">
<img src="mocha.png" name="mocha.png" onclick="drw_cushions(this)">
</section>

CSS

#a{ position:absolute;	top:100px;	 left:387px;	margin:auto;	z-index:1;	background-color: transparent;	}
#b{	position:absolute;	top:100px;	 left:387px;	margin:auto;	z-index:2;	background-color: transparent;	}
#c{	position:absolute;	top:100px;	 left:387px;	margin:auto;	z-index:3;	background-color: transparent;	}
#d{	position:absolute;	top:100px;	 left:387px;	margin:auto;	z-index:4;	background-color: transparent;	}	
#e{ position:absolute;	top:100px;	 left:387px;	margin:auto;	z-index:5;	background-color: transparent;	}	
#f{	position:absolute;	top:100px;	 left:387px;	margin:auto;	z-index:6;	background-color: transparent;	}
#g{	position:absolute;	top:100px;	 left:387px;	margin:auto;	z-index:7;	background-color: transparent;	}
#h{	position:absolute;	top:100px;	 left:387px;	margin:auto;	z-index:8;	background-color: transparent;	}
#i{	position:absolute;	top:100px;	 left:387px;	margin:auto;	z-index:9;	background-color: transparent;	}
.ogimg{	position:absolute;	top:100px;	 left:387px;	margin:auto;	z-index:10; }
.high{	position:absolute;	top:100px;	 left:387px;	margin:auto;	z-index:11;	}

JavaScript

jQuery(document).ready(function(){
	
	drw = function(imgg) {
	
	var imgname = imgg.name;
    var base = ' fabrics/1106/base/';
	var cushion = ' fabrics/1106/cushion/';
	var groove = ' fabrics/1106/groove/';	
	var sofap = base.concat(imgname);
	var cushionp = cushion.concat(imgname);
	var groovep = groove.concat(imgname);
	basee(sofap);
	cushionw(cushionp);
	groovew(groovep);
	document.getElementById("ogimg").style.opacity = .2;
	}
	
	drw_cushion = function(ima) {
 
 var imgnam = ima.name;
 var accr = ' fabrics/1106/right/';
 var accl = ' fabrics/1106/left/';
 var accg = ' fabrics/1106/groove/'; 
 var accrp = accr.concat(imgnam);
 var acclp = accl.concat(imgnam);
 var accgp = accg.concat(imgnam);
 accrpf(accrp);
 acclpf(acclp);
 accgpf(accgp);
 document.getElementById("ogimg").style.opacity = .2;
 }

 
 drw_cushions = function(im) {
 
 var imgna = im.name;
 var armr = ' fabrics/1106/right/';
 //var arml = ' fabrics/1106/left/';
 var armg = ' fabrics/1106/groove/';
 var armrp = armr.concat(imgna);
 //var armlp = arml.concat(imgna);
 var armgp = armg.concat(imgna);
 armrf(armrp);
 //armlf(armlp);
 armgf(armgp);
 document.getElementById("ogimg").style.opacity = .2;
 }


	function basee(pat){
	
	var a = document.getElementById("a");
	var a_context=a.getContext("2d");
	var dragon = new Image();
	dragon.src = ' sofa1106/ryan/base.png';
	var sofapp = new Image();
	sofapp.src = pat;
	a_context.drawImage(dragon,0,0);
	a_context.globalCompositeOperation = "source-atop";
	var patter = a_context.createPattern(sofapp, 'repeat');
	a_context.rect(0, 0, 1000, 350);
    a_context.fillStyle = patter;
	a_context.fill();	
	return 0;	
	}
	
	function cushionw(pat1){
	
	var b = document.getElementById("b");
	var b_context=b.getContext("2d");
	var dragon1 = new Image();
	dragon1.src = ' sofa1106/ryan/cushion.png';
	var cushionpp = new Image();
	cushionpp.src = pat1;
	b_context.drawImage(dragon1,0,0);
	b_context.globalCompositeOperation = "source-atop";
	var patter1 =...