Изменение метки на текстовое поле по щелчку мыши?

---

Этот блок кода находится внутри цикла:

<label id=\"col_{$child_column_id}\">{$child_column_id}</label>

<input type=\"text\" id=\"{$child_column_id}\" onblur=\"cancelRename(this, this.id)\" style=\"display:none\">

<br>

<label id=\"{$child_column_id}\" onclick=\"renameColumn(this.id, this.id)\">Rename</label> /

<a href=\"".base_url()."index.php/table/deleteCol/{$child_column_id}\"> Delete</a> /

<a href=\"".base_url()."index.php/table/insertNewColumn/1/{$child_column_id}\">Split</a></td>";

Когда я нажимаю на переименование, оно должно измениться на "Сохранить", а метка, содержащая идентификатор/имя столбца, должна измениться на текстовое поле. Когда я нажимаю на кнопку Сохранить, он фиксирует изменения в базе данных; если пользователь нажимает за пределами текстового поля, он отменяет изменения и снова становится меткой. "Сохранить" снова станет "переименовать".

Что я уже пробовал:

//on click: show textbox, hide label
      function renameColumn(label_id, inputText_id)
      {
        alert('Entered rename' label_id);
        //change 'Rename' to 'Save'
        document.getElementById(label_id).innerHTML = 'Save';
        $(label_id).css('display', 'none');
        $(inputText_id)
        .val($(label_id).text())
        .css('display','')
        .focus();
      }

      //on blur
      function cancelRename(editText, label)
      {
        document.getElementById(label).innerHTML = 'Rename';
        $(editText).css('display', 'none');
        //$(column_id)
        .css('display', '');
      }

      //on save
      function saveColumnName(editText_value, column_id)
      {

        document.getElementById(label).innerHTML = 'Rename';
      }

---