jquery - how to pass DIV text in a set of elements to another set of elements?

Question

I need to get the text of each H3 tag and add this text to the relevant (read more link ) in a P tag .

I want this outcome :

var headingContent = jQuery('.eael-grid-post-link').text();
jQuery(".eael-post-elements-readmore-btn").each(function(index) {
  jQuery(this).append("<p class='someclass'>" + headingContent + "</p>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="https://somelink.com" class="eael-post-elements-readmore-btn">Read More
  <p class="someclass">post 1</p>
</a><a href="https://somelink.com" class="eael-post-elements-readmore-btn">Read More
  <p class="someclass">post 2</p>
</a><a href="https://somelink.com" class="eael-post-elements-readmore-btn">Read More
  <p class="someclass">post 3</p>
</a><a href="https://somelink.com" class="eael-post-elements-readmore-btn">Read More
  <p class="someclass">post 4</p>
</a>

the result:

why are all the values appended to each link ?

Answer 1

You are getting all h3 tags contents and applying all of them every time in all "Read more" place, this is the problem. One approach to you is to get the div of each post, then get the h3 tag and apply in "Read more", like:

var postDiv = jQuery('.post-div'); 

postDiv.each(function () {
  let content = jQuery(this).first('h3').text();

  jQuery(this).first(".eael-post-elements-readmore-btn")
   .append( "<p class='someclass'>" + content + "</p>"  );
});

This is the ideia, check the code please.