Fonction éditer d'un liste de tâche

[mbsss]

Bonjour à tous!

Je débute en jquery, et j'essaye de faire une liste de tâche, où l'on peut ajouter une tâche (forcément ), la supprimer, la cocher + barrer, et l'éditer.
Tout marche, sauf pour la partie édition, je voudrais que quand on clic sur le bouton éditer (qui s'affiche sur chaque tâche), un champ texte avec un bouton "Modifier" s'affiche à droite, et le problème c'est que si j'ai 3 tâches :

1èr tâche : 3 fois le champ+bouton
2ème tâche : 2 fois le champ + bouton
3ème tâche : 1 fois le champ + bouton

Voici un extrait de mon script :

Code :

1
2
3
4
5
6
7
8
$(".edit").click(function(){
		$(this).removeClass("edit").addClass("edited");
		if($(this).hasClass("edited")){
		$(this).parent().append("<input type='text' id='modiftache' /><input type='button' value='Modifier' id='btnmodif' />")
					};
 
 
					});

J'imagine que c'est à cause de la class ".edit" qui est identique sur toutes les tâches de la liste, donc selon où on est positionné dans la liste il va par exemple trouver 2 fois ".edit", et donc l'afficher 2 fois, mais je ne sais pas trop comment empêcher cela.


Merci d'avance pour votre aide