JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example">
    These are some <span id ="special"> special</span> words that should be faded in one after the other.
</div>

CSS

#special {
  color: red
}

JavaScript

function doSomething(spanID) {
    
    alert(spanID);
    
 }

var orig = $(".example:first").html()

var $el = $(".example:first"), text = $.trim($el.text()),
    words = text.split(" "), html = "";

for (var i = 0; i < words.length; i++) {
    html += "<span>" + words[i] + ((i+1) === words.length ? "" : " ") + "</span>";
};
$el.html(html).children().hide().each(function(i){
  $(this).delay(i*200).fadeIn(700);
}).promise().done(function(){
       $('.example:first').html(orig)
    })
    
function doSomething(spanID) {
    
    alert(spanID);
    
 }