javascript - jQuery - 変更後に html 要素を保持する

Question

Ruby on Rails を使用して単純な編集/送信ボタンを実装し、「特別なコンテンツ」という名前のクラスを持つ h4 のコンテンツを置き換えています。

これがrhtmlの私のコードです：

    <div class="modal-body" style="height: 280px !important;">
      <%= image_tag("special/turkey.png", :alt => "turkey", :class => "special-img") %><br>
      <h4 class="special-content">#93 Turkey, Avocado & Cheese</h4><h4>&nbsp;with Small     Sized Drink & Chip</h4>
    </div>

これは、rhtml コードのすぐ上に実装されている jQuery のコードです。

<script type="text/javascript">
$(document).ready(function() {
  $("body").on("click", "#edit", function() {
    $('#edit').replaceWith('<a class="btn" id="submit">Submit</a>');
    $('.special-content').replaceWith('<input class="special-content-edit" type="text" value="' + $('.special-content').html() + '">');
    $('.special-img').replaceWith('<input class="special-img-edit" type="text" value="' +     $('.special-img').attr('src') + '">');
  });

  $("body").on("click", "#submit", function() {
    $('#submit').replaceWith('<a class="btn" id="edit">Edit</a>');
    $('.special-img-edit').replaceWith('<img class="special-img" src="' + $('.special-img-    edit').val() + '">');
    $('.special-content-edit').replaceWith('<h4 class="special-content">' + $('.special-content-edit').val() + '</h4>');
  });
});
</script>

jQuery は、ユーザーが h4 コンテンツを置き換えることを許可する必要があります。すべて正常に動作します。ただし、別のリンクに移動してそのページに戻ると、h4 コンテンツが元のコンテンツ ("#93 ターキー、アボカド & チーズ") に戻ります。変更された要素を保持するにはどうすればよいですか?