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

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

<span id="lblName">Mudassar</span>
<p id="change">Изменить</p>
<p id="ch">Отменить</p>
<script>
document.getElementById('change').addEventListener('click',() => {
  document.getElementById('lblName').outerHTML=`<input type="text">`;
})
document.getElementById('ch').addEventListener('click',() => {
  document.getElementById('lblName').outerHTML=`<span>`;
})
</script>