Changing a label to textbox on click?

See more:

HTML

PHP

This block of code is inside a loop:

<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>";

When I click on Rename, it should change to 'Save' and the label holding the id/name of the column should change to a textbox. When I click on Save, it will commit the changes to the database; if the user clicks outside the textbox, it will cancel the changes and go back to being a label. 'Save' will become 'Rename' again.

What I have tried:

//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';
      }