JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div>
    
    <!-- even though it is nested, 
        this <a> will be first 
        when searching for tagName-->
    <div>
        <a><span>sorry1!</span></a>
    </div>
    
    <div>
        <a><span>sorry2!</span></a>
    </div>
    
    <a><span>sorry3!</span></a>
    
    <a><span>sorry4!</span></a>
    
    <a><span>sorry5!</span></a>
    
    <a><span style="color:blue;">CLICK THIS ONE</span></a>
    
    <a><span>sorry6!</span></a>
    
    <a><span>sorry7!</span></a>
    
    <a><span>sorry8!</span></a>
    
</div>

JavaScript

function q(elem){
    var nodes = elem.querySelectorAll('span');
    console.log(nodes);
    for(var i = 0; i < nodes.length; i++){
        if(nodes[i].parentNode === elem) return nodes[i];
    }
}


$('a').click(function() {
    var result = q(this);

    alert(result.innerHTML);

});