Modifier un nom de lien dans un menu avec keyup sur un input

Bonjour,

Désolé pour le titre, je savais pas trop comment expliquer ça concrètement. Donc là je peux expliquer, en gros j'ai un dropdown, un menu si on veut tel que :

<div class="drop col-xs-4">
            <div class="listes col-xs-12">
                <ul>
                    <li class="page" data-fil="fa-clock-o" data-titre="Historique">
                        <a href="historique"><div><i class="fa fa-clock-o"></i></div><span>Historique</span></a>
                    </li>
                    <li class="page" data-fil="fa-user" data-titre="Les bénévoles">
                        <a href="les-benevoles"><div><i class="fa fa-user"></i></div><span>Les bénévoles</span></a>
                    </li>
                    <li class="page" data-fil="fa-file-text-o" data-titre="Les statuts">
                        <a href="les-statuts"><div><i class="fa fa-file-text-o"></i></div><span>Les statuts</span></a>
                    </li>
                    <li class="divider"></li>
                    <li class="page" data-fil="fa-link" data-titre="Un autre lien">
                        <a href="un-autre-lien"><div><i class="fa fa-link"></i></div><span>Un autre lien</span></a>
                    </li>
                </ul>
            </div>
            <div class="edition col-xs-12">
                <table>
                    <tbody><tr>
                        <td class="fil"></td>
                        <td class="titre"><input type="text"></td>
                    </tr>
                </tbody></table>
            </div>
        </div>

A l'aide de jQuery, quand je clique sur un <-li->, je récupère l'icone dans <-td class="fil"-> et le titre dans l'input, code que voici :

$(".page").click(function(e) {
        e.preventDefault();
        var that = $(this).find('span'); // On cherche le span pour après
        var titre = $(this).data('titre'); // On récupère le titre
        var fil = $(this).data('fil'); // On récupère l'icone
        var edition = $(this).parents(".col-xs-12").siblings(); // On switch sur la div edition
            edition.fadeIn().find(".titre input").val(titre); // On remplit l'input
            edition.find(".fil").empty().append("<i class='fa "+fil+"'></i>"); // On remplit l'icone

Ca fonctionne parfaitement. Là où je coince, c'est le code après, en effet, je veux que quand je modifie l'input, ça modifie en temps réel (pas en sauvegarde, juste en affichage), le span du titre (= that). Ca fonctionne. Cependant, quand je modifie par exemple celui du dessous, il va également modifier le premier, si je modifie un troisième, il va modifier les 3 etc..

En gros c'est comme si une variable (j'ignore laquelle), s'instanciait à chaque fois que je cliquais et que elle effectuait le changement sur toutes les <-li-> qui ont été cliqué. Or je ne veux que celle où je clique.
Le code en question :

$(".titre input").keyup(function() { // Quand une touche est pressé dans l'input
            that.text($(this).val()); // Modifier le span par la valeur de l'input
});

Je comprends pas pourquoi il modifie toutes les <-li-> qui ont été cliqué précédemment en plus de la current.
Merci de votre aide :/