i made a multiple canvases in the same page (depends on the pdf pages), it's working fine..

but when i add buttons to add different canvases some of the doesn't work sadly! what a i trying to do ? well i'm trying to add ex: text on (mouse: down) for different canvases.

heres my code:

HTML

<a href="#" id="addText" >
    <span>
       <i ></i>
    </span>
</a>
<a href="#" id="addRect" >
    <span>
    <i ></i>
    </span>
</a>

JS

    const canvasFArea = () => {
    $(".spread .page").each(function () {
      $(this).append(
        "<div class='canvasArea'><canvas></canvas></div>"
      );
    });
    $(".canvasArea canvas").each(function () {
      let target = $(this).closest(".page").attr("data-page-number");
      $(this).attr("id", target);
      var canvas = new fabric.Canvas(target);
      canvas.renderAll();

      function addText(e) {
        var customtxt = new fabric.IText('Tap and Type', {
          fontFamily: 'helvetica',
          fontSize: 30,
          fontWeight: 400,
          fill: 'red',
          fontStyle: 'normal',
          top: e.offsetY,
          cursorDuration: 500,
          left: e.offsetX,
        });
        canvas.add(customtxt);
      }
      function addRect() {
        var rect = new fabric.Rect({
          left: 100,
          top: 50,
          fill: 'yellow',
          width: 200,
          height: 100,
          objectCaching: false,
          stroke: 'lightgreen',
          strokeWidth: 4,
        });
    
        canvas.add(rect);
        canvas.setActiveObject(rect);
      }
      

      canvas.setWidth($(".page").width());
      canvas.setHeight($(".page").height());

      $(".tool-button").on("click", function() {
        $(".tool-button").removeClass("active");
        $(this).addClass("active");
        const addRectF = () => {
            if ($("#addRect").hasClass("active")) {
                canvas.on("mouse:down", function(options) {
                    if (options.target == null) addRect();
                });
            } else {
                canvas.off("mouse:down", );
            }
        }
        addRectF();
    });
    $(".tool-button").on("click", function() {
        $(".tool-button").removeClass("active");
        $(this).addClass("active");
        const addTextF = () => {
            if ($("#addText").hasClass("active")) {
                canvas.on("mouse:down", function(options) {
                    if (options.target == null) addText(options.e);
                });
            } else {
                canvas.off("mouse:down", );
            }
        }
        addTextF();
    });

      $(".saveCanvas").on("click", function () {
        let dataSave = JSON.stringify(canvas)
        localStorage.setItem(target, JSON.stringify(dataSave));
      })
      $(".load").on('click', function () {
        let loadData = JSON.parse(localStorage.getItem(target));
        canvas.loadFromJSON(loadData);
      })
    });
  };
  canvasFArea();

the text is working perfectly, but the rect not working when i try to add, any clue or fix or this? and please don't mind my code