JSFiddle - React, Tailwind, and code Playground

HTML

<script id="moreArticles" type="html/template">
    <article>article 3: here is some text</article>
    <h2 class="subtitled">article 3: h2 header</h2>
    <article>article 4: here is some text</article>
    <h2 class="subtitled">article 4: h2 header</h2>
    <article>article 5: here is some text</article>
    <h2 class="subtitled">article 5: h2 header</h2>
    <article>article 6: here is some text</article>
    <h2 class="subtitled">article 6: h2 header</h2>
</script>

<div id="main">
    <article>here is some text</article>
    <h2 class="subtitled">h2 header</h2>
    
    <article>article 2: here is some text</article>
    <h2 class="subtitled">article 2: h2 header</h2>
</div>

<a href="#" class="load-more">load more</a>

CSS

article { border: solid 1px blue; }
.subtitled { display: none; position: absolute; border: solid 1px red; background-color: white; bottom:-60px; left:150px; }

JavaScript

$('#main').on('mouseenter mouseleave', 'article', function() { 
    $(this).next('h2.subtitled').toggle();
});

//load more articles
$(".load-more").click(function(e){
  
    $('#main').append($('#moreArticles').html());
   
});