親にidをつけてonclickで子の要素を変化させたい

javascriptのより良い書き方を探しています。

フォームの各項目を個別編集できるようそれぞれボタンを設置して入力と表示を切り替えたいのですが、まとめて書ける良い方法はないでしょうか？
記載のソースようにそれぞれにidをつけて編集させるしかないでしょうか？

例えば

<button id="edit" onclick="editBtn()"></button>

と統一して、

id="name-form"内のonclickを押した時は、name-form内のid="form"内を書き換え
id="address-form"内のonclickを押した時は、address-form内のid="form"内を書き換え
id="email-form"内のonclickを押した時は、email-form内のid="form"内を書き換え
などと一括で書ける書き方があればご教示ください。
よろしくお願いいたします。

html

  <div class="form-wrap" id="name-form">
     <div class="form-area" id="form nameArea">
        <span>名前</span>
     </div>
     <div class="edit-area">
        <button id="edit1" onclick="editBtn1()"></button>
     </div>
  </div>

  <div class="form-wrap" id="address-form">
     <div class="form-area" id="form addressArea">
        <span>住所</span>
     </div>
     <div class="edit-area">
        <button id="edit2" onclick="editBtn2()"></button>
     </div>
  </div>

  <div class="form-wrap" id="email-form">
     <div class="form-area" id="form emailArea">
        <span>メールアドレス</span>
     </div>
     <div class="edit-area">
        <button id="edit3" onclick="editBtn3()">編集</button>
     </div>
  </div>

javascript

var clickNumber = 0;

// 名前
function editBtn1() {
  clickNumber++;
  if ((clickNumber%2)==0) {        
    document.getElementById("edit1")
    .innerHTML = '完了';
    document.getElementById("nameArea")
    .innerHTML = '<input id="name" placeholder="名前" type="text">';
  } else {
    document.getElementById("edit1")
    .innerHTML = '編集';
    document.getElementById("nameArea")
    .innerHTML = '<span>名前</span>';
  }
}

// 住所
function editBtn2() {
  clickNumber++;
  if ((clickNumber%2)==0) {        
    document.getElementById("edit2")
    .innerHTML = '完了';
    document.getElementById("addressArea")
    .innerHTML = '<input id="address" placeholder="住所" type="text">';
  } else {
    document.getElementById("edit2")
    .innerHTML = '編集';
    document.getElementById("addressArea")
    .innerHTML = '<span>名前</span>';
  }
}

// メールアドレス
function editBtn2() {
  clickNumber++;
  if ((clickNumber%2)==0) {        
    document.getElementById("edit3")
    .innerHTML = '完了';
    document.getElementById("emailArea")
    .innerHTML = '<input id="email" placeholder="メールアドレス" type="text">';
  } else {
    document.getElementById("edit3")
    .innerHTML = '編集';
    document.getElementById("emailArea")
    .innerHTML = '<span>名前</span>';
  }
}