Estoy tratando de mover elementos a otra parte del DOM con jquery, si se logran mover pero como son elementos que se van a repetir dinamicamente, el contenido que le di appendTo se duplica en cada uno de los elementos. Como puedo evitar que se duplique??
$(".detalles .precio").appendTo($(".contenedor-precio-nivel"));
$(".detalles .nivel").appendTo($(".contenedor-precio-nivel"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="contenido">
<div class="detalles">
<div class="precio">$120.00</div>
<div class="promedio">
<div class="estrellas">
<i class="material-icons">star_rate</i>
<i class="material-icons">star_rate</i>
<i class="material-icons">star_rate</i>
<i class="material-icons">star_rate</i>
<i class="material-icons">star_rate</i>
</div>
<span>5.0</span>
</div>
<div class="calificaciones"><span>(20,000)</span>
<p>Calificaciones</p>
</div>
<div class="nivel">Nivel Avanzado</div>
<div class="contenedor-precio-nivel"></div>
</div>
</div>
<div class="contenido">
<div class="detalles">
<div class="precio">$20.00</div>
<div class="promedio">
<div class="estrellas">
<i class="material-icons">star_rate</i>
<i class="material-icons">star_rate</i>
<i class="material-icons">star_rate</i>
<i class="material-icons">star_rate</i>
<i class="material-icons">star_rate</i>
</div>
<span>5.0</span>
</div>
<div class="calificaciones"><span>(20,000)</span>
<p>Calificaciones</p>
</div>
<div class="nivel">Nivel Principiante</div>
<div class="contenedor-precio-nivel"></div>
</div>
</div>
Por ejemplo, tengo 3 divs padres que contienen a el contenedor del precio y el nivel, entonces al ejecutar ese código de arriba, se duplica 3 veces el precio y 3 veces el nivel, ¿cómo puedo evitar que se duplique?