jquery add li to end of ul but last created li not recognised as last

jquery add li to end of ul but last created li not recognised as last

I have the following code. On cliking the button on the last li, I can create the new li. However, once created, if I click on the latest button created, new li is created. It seems it doesn`t recognise the last created li as the last li. Can someone help on this please
 
 
<div>  
 <ul id = "mylist" >  
 <li id = "1" > 1 <button id = "Button3" > Delete </button> </li>     
 <li id = "2" > 2 <button id = "Button2" > Delete </button></li>  
 <li id = "3" > 3 <button id = "another_entry" > Save </button></li>  
 </ul>  
 

 <ul id = "mylist2" >  
 <li> test1 <button id = "Button6" > Delete </button></li>  
 <li> test2 <button id = "Button5" > Delete </button> </li>  
 <li id = "6" ><button id = "Button1" > Delete </button></li>  
 </ul>  
 
 


 </div>
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
           
    <script type="text/javascript"> 
                $
    (document).ready(function() { 
                    $
    ("#mylist :button").click(function() { 
                       
    var text = $(this).val(); 
                       
    if (text == "Save") { 
                       
    } 
                   
    }); 
     
                    $

    ("#mylist li:last-child").click(function() { 
                    $
    (this).parent().append('<li>' + '<input type = "textbox">' + '<input type = "button" value= "Save">' + '</li>'); 
     
                   

    }); 
     
               

    }); 
     
           

    </script>