Make an editable paragraph

I want to create an onclick editable paragraph. I made an editable paragraph, but only one problem is that when I click on the side of the text area it becomes the paragraph which is correct, but the second time we click on the paragraph it does not work. I am very sorry for my English. Thanks for helping me.

JSFIDDLE

HTML:

<p id="about">This is paragraph</p>

      

        
        
        
      

    

SCRIPT:

 $(document).ready(function() {
        function paraClicked() {
        var aboutText = $('#about').html();
        var editableText = $('<textarea />').css({'width': '100%', 'font-size': '20px'});
        editableText.val(aboutText);
        $('#about').replaceWith(editableText);
        editableText.focus();
        editableText.blur(editableTextBlured);
    }
    function editableTextBlured() {
        var text = $(this).val();
        viewavleText = $('<p>');
        viewavleText.html(text);
        $(this).replaceWith(viewavleText);
        $(viewavleText).click(paraClicked);
    }
    $('#about').click(paraClicked);
});