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

.temp {}

.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 {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}

.edit {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
  position:relative;
  z-index: 3;
}
.edit:hover {
  background: white;
  color: black;
  position:relative;
  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

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

// Json file - it includes car image and its positions

let jsonData = {
  "path" : " UNEVENSHAPES\/",
  "info" : {
    "author" : "",
    "keywords" : "",
    "file" : "UNEVENSHAPES",
    "date" : "Uncalibrated",
    "title" : "",
    "description" : "Normal",
    "generator" : "Export Kit v1.2.8"
  },
  "name" : "UNEVENSHAPES",
  "layers" : [
    {
      "x" : 0,
      "height" : 612,
      "layers" : [
        {
          "x" : 0,
          "color" : "0xFFFFFF",
          "height" : 612,
          "y" : 0,
          "width" : 612,
          "shapeType" : "rectangle",
          "type" : "shape",
          "name" : "rectangle1"
        },
        {
          "x" : 20,
          "height" : 377,
          "layers" : [
            {
              "x" : 0,
              "height" : 377,
              "src" : "d15ad70281961be451263b418a07798b_frame0.png",
              "y" : 0,
              "width" : 218,
              "type" : "image",
              "name" : "mask_pic1"
            },
            {
              "radius" : "27 \/ 27",
              "color" : "0xACACAC",
              "x" : 52,
              "y" : 257,
              "height" : 53,
              "width" : 53,
              "shapeType" : "ellipse",
              "type" : "shape",
              "name" : "useradd_ellipse1"
            }
          ],
          "y" : 215,
          "width" : 218,
          "type" : "group",
          "name" : "user_pic1"
        },
        {
          "x" : 191,
          "height" : 120,
          "layers" : [
            {
              "x" : 0,
              "height" : 120,
              "src" : "2b5d28d0439bc3ce1d856e6c4e5607be_frame1.png",
              "y" : 0,
              "width" : 268,
              "type" : "image",
              "name" : "mask_pic2"
            },
            {
              "radius" : "26 \/ 27",
              "color" : "0xACACAC",
              "x" : 115,
              "y" : 43,
 ...