JSFiddle - React, Tailwind, and code Playground

HTML

<div class="activity-box-wrap" style="height:500px;">
    <div id="headerone-hd"></div>
    <h3 data-subject="Header One" id="headerone" class="headerone-hd active-header">Header One</h3>
        <div id="headerone-wrap" class="categ-content">
            ...
        </div>
    </div>
    <div class="activity-box-wrap">
    <div id="headertwo-hd"></div>
    <h3 data-subject="Header Two" id="headertwo" class="headertwo-hd active-header">Header Two</h3>
        <div id="headertwo-wrap" class="categ-content">
            ...
        </div>
    </div>
    <div class="activity-box-wrap">
    <div id="headerthree-hd"></div>
    <h3 data-subject="Header Three" id="headerthree" class="headerthree-hd active-header">Header Three</h3>
        <div id="headerthree-wrap" class="categ-content">
            ...
        </div>
</div>

JavaScript

$(document).on('click','h3[id="headertwo"]',function(ev){
    var body = $("html");
body.animate({scrollTop:0}, '500', 'swing', function() { 
   var clone = $(ev.target).clone();
  $('body').prepend(clone);
});
    
})