jQueryで複数の文字列を取得して指定場所に代入したい。

文章編集アプリケーションのような物を作りたいと考えています。

ボタンを押した際に文章を編集可能にするため、.html()でインプットへと変更しているのですが、取得したHoge,Fugaやhogehoge,fugafugaを所定の位置に挿入するやり方はありますでしょうか？

$(document).ready(function(){
  $('#edit').on('click', function() {
    $('#foo').each(function() {
      var title = $('#foo h4').text();
      var text = $('#foo p').text();
      $('#foo h4').html("<textarea style='width:100%;'>" + title + "</textarea>");
      $('#foo p').html("<textarea style='width:100%;'>" + text + "</textarea>");
    });
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="foo">
  <h4>Hoge</h4>
  <p>hogehoge</p>
  <h4>Fuga</h4>
  <p>fugafuga</p>
</div>

<button id="edit">edit</button>