Пользователь может добавлять только до / после div с определенным именем класса

Question

У меня есть событие добавления перетаскивания, которое создает новый маркер на странице:

function appendReservedDropMarker(builderShowcase, e) {
  const reservedDropMarkerClass = '.reserved-drop-marker';
  $(builderShowcase.document.body).find(reservedDropMarkerClass).remove();
  $(e.target).append("<p class='reserved-drop-marker'></p>");
}

Страница выглядит следующим образом:

<div class="box">
  <app-builder-navbar></app-builder-navbar>
</div>
<div class="box">
  <app-builder-hero></app-builder-hero>
</div>

Я только хочу, чтобы пользовательбыть в состоянии добавить до / после элемента box. В тот момент, когда компонент рендерится, у него есть возможность создать новый маркер в любом месте.