I'm trying to solve this challenge from TestDome and i need some help. I dont really understand how i must toggle the email and how to append the item to DOM... !!Please without Vanilla JS only!!

Implement the showCustomers function so that it renders customers as list items. The first argument to the function, customers, is an array of objects with the name and email properties. The second argument to the function, targetList, is an unordered HTML list to which each customer should be added as a separate list item.

The name and email properties should be added as two paragraphs inside the list item. At first, the email paragraph element should not be present in the DOM. The email paragraph element should be added to the DOM after the name is clicked, and it should be removed from the DOM when the name is clicked again.

For example, the following code:

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>

THIS IS MY CODE

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