Cloning contents that are different in each div

I know how to clone contents from one div to another but I'm having a problem where it clones the first div and then copies them to others. My PHP code looks like this:

<div>
<div class="mobile-top"></div>
<div class="post-date">May 11, 2021</div>
</div>
<div>
<div class="mobile-top"></div>
<div class="post-date">May 10, 2021</div>
</div>
<div>
<div class="mobile-top"></div>
<div class="post-date">May 9, 2021</div>
</div>

And my jQuery code clones the first .post-date and then copies that date to the rest. It looks like this:

<div>
<div class="mobile-top">May 11, 2021</div>
<div class="post-date">May 11, 2021</div>
</div>
<div>
<div class="mobile-top">May 11, 2021</div>
<div class="post-date">May 10, 2021</div>
</div>
<div>
<div class="mobile-top">May 11, 2021</div>
<div class="post-date">May 9, 2021</div>
</div>

Any ideas on how to clone .post-date of each <div> and copy them to .mobile-top. It should be a 1-1 match so the date of each post should be copied to .mobile-top

jQuery(document).ready(function($){
    var date = $('.post-date').html();
    $(".mobile-top").show().html(date);
});

.mobile-top {color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="mobile-top"></div>
  <div class="post-date">May 11, 2021</div>
</div>
<div>
  <div class="mobile-top"></div>
  <div class="post-date">May 10, 2021</div>
</div>
<div>
  <div class="mobile-top"></div>
  <div class="post-date">May 9, 2021</div>
</div>

Solution

assuming there is a 1-1 ratio of .mobile-top and .post-date you could do this

let dates = $('.post-date');
$('.mobile-top').each( function (index) {
  $(this).html($(dates[index]).html());
})