Показать успешно сохраненное сообщение рядом с полем ввода

Question

У меня есть форма, в которой есть кнопки редактирования и сохранения, чтобы сделать окно ввода редактируемым и отключенным.

Что мне нужно здесь, чтобы добавить успешное сообщение рядом с полем ввода.

HTML

<form> 
     <label>First Name</label> 
    <input type="text" placeholder="Lorem" readonly required /><input name="Edit" type="button" value="Edit"> <span class="alert">test</span> 
     <label>First Name</label> 
     <input type="text" placeholder="Lorem" required readonly /><input name="Edit" type="button" value="Edit"> 
     <label>Email ID</label> 
     <input type="email" placeholder="Lorem" required readonly /><input name="Edit" type="button" value="Edit"> 
     <label>Password</label> 
     <input type="password" placeholder="********" required readonly /><input name="Edit" type="Button" value="Edit"> 
     </form> 

Script

$('[name="Edit"]').on('click', function() { 
    var prev = $(this).prev('input'), 
     ro = prev.prop('readonly'); 
    prev.prop('readonly', !ro).focus(); 
    $(this).val(ro ? 'Save' : 'Edit'); 
    $(".alert").fade(); 
}); 

Вот fiddle.

Это, как мне нужно, чтобы показать сообщение, когда оно сохраняется

Answer 1

Попробуйте это:

$('[name="Edit"]').on('click', function() { 

     if($(this).val()=='Save') 
     { 
     $(".alert").fadeIn();  
     } 
     var prev = $(this).prev('input'), 
      ro = prev.prop('readonly'); 
     prev.prop('readonly', !ro).focus(); 
     $(this).val(ro ? 'Save' : 'Edit'); 

    }); 

Answer 2

Изменение:

$(".alert").fade(); 

To:

$(".alert").fadeIn();