JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>
<ul>
    <li data-variavel="1234">Asdf</li>
    <li data-variavel="4321">qwer</li>
    <li data-variavel="2345">rewq</li>
    <li data-variavel="5432">zxcv</li>
    <li data-variavel="3456">vcxz</li>
    <li data-variavel="6543">aaaa</li>
</ul>

JavaScript

$(document).ready (function () {
    $('ul > li').click(function(e) {
        console.log("O text da li selecionada foi "+$(this).text());
        console.log("O data da li selecionada foi "+$(this).attr("data-variavel"));
        console.log("O index da li selecionada foi "+$(this).index());
        alert("Index:"+ $(this).index() + "\nTexto: "+ $(this).text() +"\nVariavel: "+$(this).attr("data-variavel"));
        // voce pode pegar o indice do LI selecionado usando $(this).index();
        // o valor dentro da tag usando $(this).text() (ou $(this).innerHtml())
        // e o valor do data-variavel usando $(this).attr("data-variavel");
    });
});