jquery children attach remove edit input
===

to get more than what you expect may be nice on your birthday - but this in script drives you crazy... :(

i've got the following code:


        <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="../scripts/jquery-ui.min.js"></script>
        </head>
        <body>
        <form id="form1" runat="server">
        <div>
        <div id="id1" class="fragenMainDiv" style="width: 80%; margin: 0px;">
        <input type="button" id="id1_edit" class="editIcon" value="change">
        <span id="id1_Label" class="fragenLabel">
        <p>
        <span style="margin-left:5px;">
        <b>something</b>
        </span>
        </p>
        </span>
        </div>
        </div>
        </form>
        </body>
        
        <script type="text/javascript">
        
        
        $(document).ready(function () {
        showMain();
        });
        function showMain() {
        
        $('.editIcon').css("cursor", "pointer").click(function () {
        edit($(this).attr("id"));
        });
        
        $('.editfinish').css("cursor", "pointer").click(function () {
        editFinish($(this).attr("id"));
        });
        }
        
        function edit(idTemp) {
        //alert(fragenidTemp);
        var IdArray = idTemp.split("_");
        var Id = IdArray[0]
        var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text();
        $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove();
        $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />");
        
        $('input[id|="input' + Id + '"]').val(inputValue);
        $('.editIcon').hide();
        showMain();
        }
        
        
        function editFinish(Id) {
        var inhaltFrage = $('input[id|="input' + Id + '"]').val();
        $('.editIcon').show();
        $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove();
        $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove();
        $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>");
        
        showMain();
        }
        
        </script>
        
        </html>
what I want is an input field that reacts like a normal input field - but after the first (correct) change of value the form shows three times the input field...

Does someone have an idea? As it is a condensed script of a larger script so I need the structure of functions. Thanks for your help :)