jQuery - récupérer plusieurs valeurs

Bonjour !

J'essaie de développer un petit script qui me permettrait de faire les actions suivantes :

en cliquant sur un bouton '+', 3 input apparaissent

le bouton '+' reste sous les input créer pour pouvoir en créer plusieurs

en cliquant sur un bouton 'display', je récupère les valeurs de chacun de mes input et je met tout dans une chaîne de caractère

Le problème : bien que je parvienne à créer mes 3 input à chaque clique sur le bouton '+', le bouton display ne me récupère les valeurs que de la première série de 3 input, les autres séries ne sont pas récupérées... C'est embêtant !

Le code HTML:
<div id='labonnediv'>

<label>Type d'identifiants</label>
<input type='text' id='typeid'></input>
<label>Login</label>
<input type='text' id='loginid'></input>
<label>Mot de passe</label>
<input type='text' id='mdpid'></input>  

</div>

<input type='button' id='leboutonplus' class='smallbutton' 
    style='font-size: 20px; font-family: Verdana; margin-left: 20%;'
    value='+' onclick='addId()'></input>

<input type='button' onclick='displayIt()' value='display'> </input>

<div id='lasecondebonnediv'></div>

Le script :

function addId(){
        $('#labonnediv').append("<div id='lalignedroite'></div><label>Type d'identifiants</label><input type='text' id='typeid'></input><label>Login</label><input type='text' id='loginid'></input><label>Mot de passe</label> <input type='text' id='mdpid'></input>  ");
}

function displayIt(){
    $('input').each(function(){
    if(this.id === 'typeid'){around         console.log($('input').val());
    /*code pour récup la valeur de chaque id*/
    }
});
    $('#lasecondebonnediv').append(type);
}

Si quelqu'un pense avoir une solution.., merci d'avance :)