How to position images on dropped area using nth child in javascript

I have four images inside class box having id box1, box2, box3 and box4..

each image can be dragged and dropped to rectangle below..

my problem is when i try to position it on the dropped area using nth child in css it is not working

where is the mistake happenining in css?

How to position images on dropped area using nth child..

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  console.log(data);
    $("#"+data).css("position","unset");
  ev.target.appendChild(document.getElementById(data));
}

body{

background-repeat: no-repeat;
 background-size: cover;
 width:100%;
 height:100%;
  overflow: hidden;
   background-size: 100vw 100vh;
}
#box1 {
  position: absolute;
  top: 28.3vh;
  left: -10.98vw;
  cursor: pointer;
  border: px solid #0066CC;
  background-repeat: no-repeat;
  background-size: contain;
}

#box1 p {
  width: 10.0vw;
  height: 10.0vh;
  border-radius: 25%;
}


#box2 {
  position: absolute;
  top: 13.7vh;
  left: -10.98vw;
  
  cursor:pointer;
  border:px solid #0066CC;
  background-repeat:no-repeat;
  background-size: contain;
}

#box2 p {
 width: 5.0vw;
  height: 5.0vh;
  border-radius: 25%;
}

#box3 {
  position: absolute;
  top: 7.7vh;
  left: 43.98vw;
  
  cursor:pointer;
  border:px solid #0066CC;
  background-size: contain;
  background-repeat:no-repeat;

  
}

#box3 p {
  width: 7.0vw;
  height: 7.0vh;
  border-radius: 25%;
}

#box4 {
  position: absolute;
  top: 28.3vh;
  left: 40.98vw;
  
  cursor:pointer;
  border:px solid #0066CC;
  background-repeat:no-repeat;
  background-size:cover;
  background-size: contain;
}

#box4 p {
  width: 10.0vw;
  height: 10.0vh;
  border-radius: 25%;
}


.container2 {
  width: 50.1vw;
  position: fixed;
  top: 10.5vh;
  left: 30.5vw;
}

.boxright1 p {
  font-size: calc(2vw);
  height: 4vh;
  margin: 0;
  color: white;

  background-size: cover;
  background-repeat:no-repeat;
  
        color: #0066ff;
        text-shadow: 0px 0px 0px #999, 0px 0px 0px #888, 0px 0px 0px #777, 0px 0px 0px #6066, 0px 2px 0px #555, 0px 0px 0px #444, 0px 0px 0px #333, 0px 0
        px 0px #001135;
        font:'ChunkFiveRegular';

}

.boxright1 {
  position: absolute;
  top: 65.3vh;
  left: 17.5vw;
  
  width: 61.0vw;
  height: 35.0vh;
  
  cursor:pointer;
  border:2px solid black;

  background-repeat:no-repeat;
  background-size: contain;
  background-image:url(images/name%20board%20witout%20rope2.png);
  background-size: 40vw 55vh; 
  }
.boxright1 box{
    position: absolute;
}
.boxright1 box:nth-child(1) {
    top: 0px;
    left: 155px;
}
.boxright1 box:nth-child(2) {
    top: 5px;
    left:215px;
}
.boxright1 box:nth-child(3) {
    top: 0px;
    left: 315px;

}
.boxright1 box:nth-child(4) {
    top: 5px;
    left: 415px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>applying nth child to Class boxright1 not working</p>

<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <div id="container">
      
        <div class="box" id="box1" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300)">
          <p name="values" id="name1" class="hidden"></p>
        </div>
        
        <div class="box" id="box2" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/g/200/300)">
          <p name="values" id="name2" class="hidden"></p>
        </div>
        
        <div class="box" id="box3" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300?image=0)">
          <p name="values" id="name3" class="hidden"></p>
        </div>
        
        <div class="box" id="box4" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300/?gravity=east)">
          <p name="values" id="name4" class="hidden"></p>
        </div>

      </div>
    </div>
  </div>
</div>

<div class="boxright1" ondrop="drop(event)" ondragover="allowDrop(event)" id="4" name="d"></div>

from How to position images on dropped area using nth child in javascript