How to do a counter that not count when I drag element to empty place on the same grid (side)

I have a problemI split the screen into two partsOne half have images by grid and the other half is emptyI do dragging from one another

What conditions should I place to make sure that no part of my grid is empty?

 drop(ev, index) {    ev.preventDefault();    const data = ev.dataTransfer.getData('text');    ev.dataTransfer.setData('text', ev.target.id);    if ( ev.target.id === 'emptySide1') {      ev.target.appendChild(document.getElementById(data));      this.cnt--;    } else if ( ev.target.id === 'emptySide2') {      ev.target.appendChild(document.getElementById(data));      this.item[index] = this.img[this.index];      this.cnt++;    }       this.btnContent = (this.cnt === this.img.length) ? 'continue : fill the empty place';  }

<div class="wrapper"><div class="wrapper2"><div class="box" id="emptySide1" *ngFor="let image of img let i = index" (drop)="drop($event,i)"    (dragover)="allowDrop($event)"><img  [src]="image.name" width="100%" height="150" draggable="true" (dragstart)="drag($event, i)" [id]="image.id"></div></div><div class="border-left"></div><div id="mycanvas" class="wrapper3"><div class="box2" id="emptySide2" *ngFor="let image of img let i = index" (drop)="drop($event,i)"    (dragover)="allowDrop($event)"></div></div></div><button class="btn" (click)="loopitem()" [disabled]="cnt !== img.length">{{this.btnContent}}</button>