Изменить span на input

$(function () { 
    //Loop through all Labels with class 'editable'. 
    $(".editable").each(function () { 
        //Reference the Label. 
        var label = $(this); 
  
        //Add a TextBox next to the Label. 
        label.after("<input type = 'text' style = 'display:none' />"); 
  
        //Reference the TextBox. 
        var textbox = $(this).next(); 
  
        //Set the name attribute of the TextBox. 
        textbox[0].name = this.id.replace("lbl", "txt"); 
  
        //Assign the value of Label to TextBox. 
        textbox.val(label.html()); 
  
        //When Label is clicked, hide Label and show TextBox. 
        label.click(function () { 
            $(this).hide(); 
            $(this).next().show(); 
        }); 
  
        //When focus is lost from TextBox, hide TextBox and show Label. 
        textbox.focusout(function () { 
            $(this).hide(); 
            $(this).prev().html($(this).val()); 
            $(this).prev().show(); 
        }); 
    }); 
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<span id="lblName" class="editable">Mudassar</span><p>Изменить</p>