JSFiddle - React, Tailwind, and code Playground

by lithium182

HTML

<ul>
    <li data-index="0">
        <span>AAAAAAAA</span>
        <span>KKKKKKKKKKKK</span>
    </li>
    <li data-index="1">
        <span>AAAAAAAAA</span>
        <span>KKKKKKK</span>
    </li>
</ul>

JavaScript

var spans = document.getElementsByTagName("span");

for (var i = 0; i < spans.length; i++) {
    spans.item(i).addEventListener("click", onSpanClick, false);   
}

function onSpanClick(e) {
    var el = e.target;
    var helper = 0;
    while (true && helper < 15) {
        if (el.tagName.toLocaleLowerCase() == "li") {
            el.textContent = el.getAttribute("data-index");
            break;
        }
        else el = el.parentElement;
        
        helper++;
    }
}