Estoy tratando de agregar un elemento personalizado al hacer clic en los elementos del menú principal a los elementos del menú secundario. Cuando hago clic en el elemento principal, el código agrega el Elemento personalizado. Pero cuando hago clic en un espacio vacío del elemento secundario (ELEMENTO PERSONALIZADO) después de agregar el elemento personalizado, sigue agregando los elementos.

 $("li:has(ul)").click(function(e) { e.preventDefault(); $("ul", this).animate({ width: "40%" }, 200); var ele = '<h4 class="m-level-2" style="color: #d4dce5; text-transform: uppercase;font-family: Rajdhani,sans-serif;font-weight: 700;font-size: 1.875rem;margin-bottom: 0.5rem;">Altron<h4><h2 class="h4" style="color: #52c3df;text-transform: uppercase;font-family: Rajdhani,sans-serif;font-weight: 700;font-size: 3.75rem;margin-bottom: 1rem;"></h2><a href="#" class="nav-menu-back" style="color: #fff;font-size: 1rem;font-family: Montserrat,sans-serif;text-transform: none;">Go Back</a><hr style="background-color: #d4dce5; margin: 1.875rem 0;opacity: 1;height: 1px;" class="menu-hr">'; $("ul", this).prepend(ele); let text = $(this).find("a").first().text(); //console.log(text); $("ul", this).find("h2").text(text); });