JavaScript Script work in a specific area

[altrikx]

Hi, I'm not a programmer, so I need help, I will be very grateful!
There is a script and you need it to work only in a certain part of the page. This site is built on the readymag constructor, where the creation of a new page is attached vertically to the previous one and creates a longread. So I need the script to work only on https://readymag.com/u893338465/3151584/2/. I already tried to add data id to it, but it didn't work out very well. The constructor has a restriction on the use of code, I can only insert code into sections like </body>, so a ready-made solution is needed. Many thanks for the help!
If its possible only this area to cover

My version of script ( doesn't work well)

<script>
let renderContainer, canvas, context, container;
 
const updateContextSize = () => {
  if (canvas) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
};
document.addEventListener("DOMContentLoaded", () => {
  setTimeout(() => {
    if (RM.viewerRouter && RM.viewerRouter.mag.getMagViewport() === "default") {
      renderTorch();
    } else if (RM.constructorRouter) {
      RM.constructorRouter.on("previewMag:load:success", (preview) => {
        if (preview.mag.getMagViewport() === "default") {
          renderTorch();
        }
      });
    }
    window.addEventListener("resize", updateContextSize);
  }, 1000);
});
const renderTorch = () => {
  // parameters
  const radius = 150;
  const backgroundColor = "rgba(0,0,0,0.8)";
  let x = -200,
    y = -200;
  //tanded
  container = document.querySelector(
    "div[data-id='615ee0fc7c076700144a2f25']"
  );
  container.style.position = "absolute";
  //end tanded
  // init
  renderContainer = document.createElement("div");
  renderContainer.setAttribute("id", "render-container");
  renderContainer.setAttribute(
    "style",
    "pointer-events: none; position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent;" //pos absoliute
  );
  container.appendChild(renderContainer);
  canvas = document.createElement("canvas");
  canvas.setAttribute("id", "render-canvas");
  renderContainer.appendChild(canvas);
  context = canvas.getContext("2d");
  context.canvas.width = window.innerWidth;
  context.canvas.height = window.innerHeight;
  // Fill bg
  context.fillStyle = backgroundColor;
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  // Mouse event
  container.addEventListener("mousemove", (event) => {
    x = event.clientX;
    y = event.clientY;
  });
  const draw = () => {
    requestAnimationFrame(draw);
    // first reset the gCO
    context.globalCompositeOperation = "source-over";
    // Fill bg
    context.fillStyle = backgroundColor;
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.beginPath();
    radialGradient = context.createRadialGradient(x, y, 1, x, y, radius);
    radialGradient.addColorStop(0, "rgba(255,255,255,1)");
    radialGradient.addColorStop(1, "rgba(0,0,0,0)");
    context.globalCompositeOperation = "destination-out";
    context.fillStyle = radialGradient;
    context.arc(x, y, radius, 0, Math.PI * 2, false);
    context.fill();
    context.closePath();
  };
  requestAnimationFrame(draw);
};
  </script>

Original version

<script>
let renderContainer, canvas, context;
const updateContextSize = () => {
  if (canvas) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
};
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    if (RM.viewerRouter && RM.viewerRouter.mag.getMagViewport() === 'default') {
      renderTorch();
    } else if (RM.constructorRouter) {
      RM.constructorRouter.on('previewMag:load:success', (preview) => {
        if (preview.mag.getMagViewport() === 'default') {
            renderTorch();
        }
      });
    }
    window.addEventListener('resize', updateContextSize);
  }, 1000);
});
const renderTorch = () => {
  // parameters
  const radius = 150;
  const backgroundColor = 'rgba(0,0,0,0.8)';
  let x = -200, y = -200;
  // init
  renderContainer = document.createElement('div');
  renderContainer.setAttribute('id', 'render-container');
  renderContainer.setAttribute("style", "pointer-events: none; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent;");
  document.body.appendChild(renderContainer);
  canvas = document.createElement('canvas');
  canvas.setAttribute('id', 'render-canvas');
  renderContainer.appendChild(canvas);
  context = canvas.getContext('2d');
  context.canvas.width = window.innerWidth;
  context.canvas.height = window.innerHeight;
  // Fill bg
  context.fillStyle = backgroundColor;
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  // Mouse event
  document.addEventListener('mousemove', (event) => {
    x = event.clientX;
    y = event.clientY;
  });
  const draw = () => {
    requestAnimationFrame(draw);
    // first reset the gCO
    context.globalCompositeOperation = 'source-over';
    // Fill bg
    context.fillStyle = backgroundColor;
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.beginPath();
    radialGradient = context.createRadialGradient(x, y, 1, x, y, radius);
    radialGradient.addColorStop(0, 'rgba(255,255,255,1)');
    radialGradient.addColorStop(1, 'rgba(0,0,0,0)');
    context.globalCompositeOperation = 'destination-out';
    context.fillStyle = radialGradient;
    context.arc(x, y, radius, 0, Math.PI * 2, false);
    context.fill();
    context.closePath();
  };
  requestAnimationFrame(draw);
};
</script>