JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<ul id="estoqueD" class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                    <li class="dropdown-header text-start">
                      <h6>Planta</h6>
                    </li>
                    <li data-id="estoque_4"><a class="dropdown-item" id="estoque_1" href="#">Sangao</a></li>
                    <li data-id="estoque_6"><a class="dropdown-item" id="estoque_2" href="#">Pirula</a></li>
                  </ul>

JavaScript

//const miDropdown = document.getElementById('estoqueD');
const miDropdown = document.querySelector('.dropdown-menu');
const segundoElemento = miDropdown.querySelector('li:nth-of-type(2)');
const idSegundoElemento = segundoElemento.getAttribute('data-id');

//console.log(idSegundoElemento);

const elementosLista = miDropdown.querySelectorAll('li');
elementosLista.forEach((elemento) => {
  elemento.addEventListener('click', (event) => {
    const elementoSeleccionado = event.target.closest('li');

    // Obtener el valor del atributo data-id del elemento seleccionado
    const plant = elementoSeleccionado.getAttribute('data-id');

    console.log(plant); // Imprimir el valor del atributo data-id
    console.log('elementoSeleccionado:', plant); // Imprimir el elemento seleccionado completo

    // Resto del cĂłdigo...
  });
});