jQueryを用いたその場編集機能の実装

実現したいこと

編集ボタンを配置し、編集ボタンを押すと要素がテキストに切り替わり登録可能になるようにしたい。

ソースコード

index.html

 <div>
   <form action""  id="food_form" method="post">
     <span id="food">焼肉</span>
     <input type="text" id="text" value=""　style="display:none;">
     <input type="button" id="edit" value="編集">
     <input type="button" id="regist" value="登録"　style="display:none;">
   </form>                   
 </div>



<script>
$(document).ready(function() {
    $(".edit").click(function(){
　　　  $("#text").removeAttr('style');
       $(this).hide();
       $("#regist").removeAttr('style');
    });

    $(".add_btn").click(function(){
       $('#food_form').submit();
    });
});

</script>

自分で試したこと

現在は編集ボタンを押すと編集ボタンが消え、display:noneで隠していたtextフォームと登録ボタンが現れる仕組みでの実装を考えています。

しかしコードがすっきりしないので、textフォームや登録ボタンもJQueryで追加するやり方の方が良いのかもしくは別のやり方があるのかを知りたいです。
よろしくお願いします。