Detaching element and append without multiply in div

Question

I want to detach or clone the a tag in my html. I can't change the structure since i use a page builder. It's like the a tag is being inserted two times if i have two elements. IF i have three elements, it's showing three times.

I have this:

<div class="wrapper">
    <div class="element">
        <div class="container">
            <h4>Headline</h4>
            <a href="#"></a>
        </div>
    </div>
    <div class="element">
        <div class="container">
            <h4>Headline</h4>
            <a href="#"></a>
        </div>
    </div>
</div>

I want this:

<div class="wrapper">
    <div class="element">
        <a href="#"></a>
        <div class="container">
            <h4>Headline</h4>
            <a href="#"></a>
        </div>
    </div>
    <div class="element">
        <a href="#"></a>
        <div class="container">
            <h4>Headline</h4>
            <a href="#"></a>
        </div>
    </div>
</div>

But i get this:

<div class="wrapper">
    <div class="element">
        <a href="#"></a>
        <a href="#"></a>
        <div class="container">
            <h4>Headline</h4>
            <a href="#"></a>
        </div>
    </div>
    <div class="element">
        <a href="#"></a>
        <a href="#"></a>
        <div class="container">
            <h4>Headline</h4>
            <a href="#"></a>
        </div>
    </div>
</div>

// My jQuery

$('.element .container a').clone().prependTo('.element');

Answer 1

$('.element') matches both of those divs, so each of the cloned links are being attached to both of them.

One way to avoid the unwanted duplicates is to be specific about which .element each of the cloned nodes should be attached to:

$('.element .container a').each(function() {
  $(this).clone().prependTo(
    $(this).closest('.element')
  )
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="element">
    <div class="container">
      <h4>Headline</h4>
      <a href="#"></a>
    </div>
  </div>
  <div class="element">
    <div class="container">
      <h4>Headline</h4>
      <a href="#"></a>
    </div>
  </div>
</div>