JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <a href="test.html" id="replace" class="someclass" tabindex="1">test</div>
</div>

CSS

.someclass {
    font-size:200%;
}
#tmp {
    color: blue;
}
#replace {
    color: red;
}

JavaScript

function ReTag (ID, newTag)
{
    var tmpID = "tmp";  //Can't be the same ID as anything else on the page
    
    
    var TBReplaced = $('#' + ID);
    
    TBReplaced.after('<'+newTag+' id="'+tmpID+'">'+TBReplaced.html()+'</'+newTag+'>');
    
      $.each(TBReplaced[0].attributes, function(i, attrib){
        var name = attrib.name;
        var value = attrib.value;
        
        if (name != "id")
            $('#' + tmpID).attr(name, value);
      });
    
    TBReplaced.remove();
    $('#' + tmpID).attr('id', ID);
}

$(function () {
ReTag ('replace', 'span');
});