Display lista detail data on click

Muestra información a detalle a partir de hacer clic en un elemento de una lista.

by Porfirio Chavez

HTML

<form id="formPerson" method="post">
    <label for="inName">Nombre: </label>
    <input type="text" name="inName" id="inName">
    <label for="inMail">Mail: </label>
    <input type="text" name="inMail" id="inMail">
    <label for="intelephone">Teléfono: </label>
    <input type="text" name="inTelephone" id="inTelephone">
    <button>Agregar</button>
</form>

<hr>
<h2>Contactos:</h2>
<ul id="dataPersons">
</ul>

CSS

label{
            display: block;
        }

JavaScript

var dataPerson = {}; //Variable global para almacenar los datos del formulario

    /*
    * Funcion para agregar los datos a la variable global y a la lista.
     */
    function addContact(event){
        event.preventDefault();
        event.stopPropagation();

        var form = event.data.form; //recibe el Objeto $("form") desde la variable del evento
        var dataForm = form.serializeArray(); //Guardamos todos los inputs

        var liHtml = ""; //html de la lista vacio
        var indice = "";
        var datosActuales = {};

        $.each(dataForm, function(){ //iteramos los datos de cada input
            if(this.name == "inName") {
                /* Si el el campo de nombre lo almacenamos pues sera nuestro indice de busqueda */
                indice = this.value;

                /* Generamos un elemento de la lista el cual tendra como ID el nombre
                esto nos servirá para ubicarlo después
                 */
                liHtml += "<li id=\"" + this.value + "\" class=\"show-details\"><span>" + this.value + "</span></li>";
            }
            datosActuales[this.name] = this.value;
        });

        dataPerson[indice] = datosActuales; //Almacenamos los datos en la variable global
        $("#dataPersons").append(liHtml); //anexamos el elemento a la lista

        form[0].reset(); //restablecer formulario
    }

    /*
     * Función para quitar el elemento <li class="details"> que no se este utilizando
     */
    function destroyDetail(){
        $(".details").remove();
    }

    /*
     * Funcion para mostrar los datos en detalle que estan almacenados en la variable global
     * para realizarlo utilizamos el nombre ya que fue nuestro indice en addContact()
     */
    function showDetail(event){
        event.stopPropagation();
        destroyDetail();
        var currentLi = $(event.currentTarget);
        var id = currentLi.attr("id");

        var dataHtml = "<span>" + dataPerson[id].inName + "</span>"
             ...