JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li><a href="#" id="parent-one">One</a></li>
    <li><a href="#" class="active" id="parent-two">Two</a></li>
    <li><a href="#" id="parent-three">Three</a></li>
    <li><a href="#" id="parent-four">Four</a></li>
</ul>

JavaScript

$(function(){
   $("ul.menu li").each(function(){
a=$(this).find('a');
if(a.hasClass('active')){
id=a.attr('id');
a.attr('id',"child-"+id.split("-")[1]);
}
});
    
});