Получение Undefined при попытке получить значение из поля ввода, построенного через jQuery

HTML:

<input value='Rename' type='button'  onclick='RenameGlobalPhase({$row['id']});'
<span id='renameGlobalPhase{$row['id']}'>" . $row['phase'] . "</span>

Вот мой код JS:

function RenameGlobalPhase(id)// {{{
{
    var phase = $('#renameGlobalPhase' + id).html();
    $('#renameGlobalPhase' + id).replaceWith("<input id='#renameGlobalPhase" + id + "' type='text' onblur='SaveNewPhaseName(" + id + ");' value='" + phase + "' />");
    $('#renameGlobalPhase' + id).focus();
} // }}}

function SaveNewPhaseName(id)// {{{
{
    var newPhase = $('#renameGlobalPhase' + id).val();  
    alert(newPhase);
    $('#renameGlobalPhase' + id).replaceWith('<span>' + newPhase + '</span>');
} // }}}

Поэтому, когда пользователь нажимает кнопку input выше, я поворачиваю span рядом с ним в поле input чтобы пользователь мог переименовать значение. И в onblur (недавно созданный из jQuery для этого нового поля input), я хочу сохранить новое значение и вернуться обратно к span.

Предупреждение показывает undefined значение. Кто-нибудь может понять, что не так?