JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<button class='add_canvas'>Add Canvas</button>
<button id ='add_text'>Add Text</button>
<button id ='add_circle'>Add Circle</button>
<div id="content"></div>

CSS

canvas{
    border: 1px solid green;
    margin: 5px;
    z-index: 1;
}
.canvas-container{
    margin: 5px;    
}

JavaScript

// store multiple instances in  the array
var canvasInstances = [];
$('canvas').each(function () {
    var fabricCanvasObj = new fabric.Canvas(this);
    canvasInstances.push(fabricCanvasObj);
    fabricCanvasObj.renderAll();
});
// add canvas on click
$('.add_canvas').on("click",function(event){
   var content = document.getElementById("content");
   var newcanvas = document.createElement("canvas");
   content.appendChild(newcanvas);
});
// add text on click
$('#add_text').on("click",function(event){
   var Text = new fabric.Textbox('Sample');
   canvasInstances[0].add(Text).renderAll();
});
// add circle on click
$('#add_circle').on("click",function(event){
   var Circle = new fabric.Circle();
   canvasInstances[0].add(Circle).renderAll();
});
// error starts when adding text and circle in console log.
// what i wanted is to use all methods and access all 
// instances in fabric to make all canvas editable