JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="fileup" name="fileup" type="file" style="display:none" >

<div class="container">

</div>

CSS

.container {
	background: gold;
	position: relative;
}

.container img {
	position: absolute;
	top: 0;
	bottom: 250px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 999;
}

.masked-img {
	overflow: hidden;
	position: relative;
}

.txtContainer {
	position: absolute;
	text-align: center;
	color: #FFF
}

.txtContainer:hover {
	background: red;
	padding: 1px;
	border-style: dotted;
}

.pip {
	display: inline-block;
	margin: 0;
	position: absolute;
}

.remove {	
	background: #444;
	border: 1px solid black;
	color: white;
	text-align: center;
	cursor: pointer;
	position: absolute;
	z-index: 3;
}

.remove:hover {
	background: white;
	color: black;
}

.edit {
	display: block;
	background: #444;
	border: 1px solid black;
	color: white;
	text-align: center;
	cursor: pointer;
	position: absolute;
	z-index: 3;
}

.edit:hover {
	background: white;
	color: black;
	position: absolute;
	z-index: 3;
}

.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 16px solid orange;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}

JavaScript

let openID = null;
var target;
var imageUrl = "https://i.imgur.com/RzEm1WK.png";

let jsonData = {  
  "layers" : [
    {
      "x" : 0,
      "height" : 612,	  
      "layers" : [       
        {
          "x" : 160,         
          "layers" : [
            {
              "x" : 0,            
              "src" : "ax0HVTs.png",
              "y" : 0,
              "height" : 296,
              "width" : 429,              
              "name" : "L2b-1"
            }            
          ],
          "y" : 291,         
          "name" : "user_image_1"
        },
        {
          "x" : 25,         
          "layers" : [
            {
              "x" : 0,             
              "src" : "hEM2kEP.png",
			  "height" : 324,
			  "width" : 471,
              "y" : 0,             
              "name" : "L2C-1"
            }
          ],
          "y" :22,         
          "name" : "L2"
        }
      ],
      "y" : 0, 
      "width" : 612,	  
      "name" : "L1"
    }
  ]
};

$(document).ready(function() {

    // below code will upload image onclick mask image

    $('.container').click(function(e) {

        var res = e.target;
        target = res.id;
        console.log(target);
        if (e.target.getContext) {
            // click only inside Non Transparent part
            var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
            if (pixel[3] === 255) {
                setTimeout(() => {
                    $('#fileup').click();
                }, 20);
            }
        }
    });

    // Below code will fetch mask images from json file

    function getAllSrc(layers) {
        let arr = [];
        layers.forEach(layer => {
            if (layer.src) {
                arr.push({
                    src: layer.src,
                    x: layer.x,
                    y: layer.y,
                    height: layer.height,
                    width: layer.width,
                    name: layer.name
  ...