Estoy tratando de resolver este desafío de TestDome y necesito ayuda. Realmente no entiendo cómo debo alternar el correo electrónico y cómo agregar el elemento a DOM... ¡¡Por favor, solo sin Vanilla JS!!

Implemente la función showCustomers para que represente a los clientes como elementos de lista. El primer argumento de la función, clientes, es una matriz de objetos con las propiedades de nombre y correo electrónico. El segundo argumento de la función, targetList, es una lista HTML desordenada a la que se debe agregar cada cliente como un elemento de lista independiente.

Las propiedades de nombre y correo electrónico deben agregarse como dos párrafos dentro del elemento de la lista. Al principio, el elemento de párrafo de correo electrónico no debe estar presente en el DOM. El elemento de párrafo de correo electrónico debe agregarse al DOM después de hacer clic en el nombre, y debe eliminarse del DOM cuando se vuelve a hacer clic en el nombre.

Por ejemplo, el siguiente código:

 document.body.innerHTML = ` <div> <ul id="customers"> </ul> </div> `; let customers = [{name: "John", email: "john@example.com"}, {name: "Mary", email: "mary@example.com"}]; showCustomers(customers, document.getElementById("customers")); let customerParagraph = document.querySelectorAll("li > p")[0]; if(customerParagraph) { customerParagraph.click(); } console.log(document.body.innerHTML); Should render: <div> <ul id="customers"> <li> <p>John</p> <p>john@example.com</p> </li> <li> <p>Mary</p> </li> </ul> </div>

ESTE ES MI CÓDIGO

 function showCustomers(customers, targetList) { customers.forEach(item =>{ let res = `<li> <p> ${item.name}</p>; <p> ${item.email}</p>; </li>; targetList.innerHTML = targetList.appendChild(res); }) }

https://www.testdome.com/questions/javascript/customer-list/49798?visibility=3&skillId=2