File upload dialog box not displaying onclick first time

That happens when you click on the first figure and then on the second (overlapped part), then the pixel is not white but transparent, that's why you do not see the file manager.

What I suggest here is use single image/canvas and in addition to checking color pixel under the cursor also check the position of the click (minus position of the image). In this case, you'll be able to create any logic you want.

One more solution with keeping layout as it is now, is to check not e.target (i.e. element that was clicked), but all applicable (all which's bounding box is applicable for click position) canvases:

$('.container').click(function(e) {
  // filtering out non-canvas clicks
  if (e.target.tagName !== 'CANVAS') return;

  // getting absolute points relative to container
  const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
  const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;

  const $canvasList = $(this).find('canvas');
  // moving all canvas parents on the same z-index
  $canvasList.parent().css({zIndex: 0});

    $canvasList.filter(function() { // filtering only applicable canvases
        const bbox = this.getBoundingClientRect();
        const canvasTop = bbox.top + window.scrollY;
        const canvasLeft = bbox.left + window.scrollX;
        return (
            absX >= canvasLeft && absX <= canvasLeft + bbox.width &&
            absY >= canvasTop && absY <= canvasTop + bbox.height)
    }).each(function () { // checking white in a click position
    const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft;
    const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop;
    const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data;
    if (pixel[3] === 255) {
      $(this).parent().css({zIndex: 2})
      target = this.id;
      console.log(target);
      setTimeout(() => {
        $('#fileup').click();
      }, 20);
    }
  })
});