Hello, I have a table, has many rows. for example one of from rows(all rows are same):

<tr>
    <td>
        <input type="text" />
    </td>
    <td>
        <textarea cols="40" rows="3" ></textarea>
    </td>
    <td>
        <select>
            //options
        </select>
    </td>
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="checkbox" />
    </td>
</tr>

Rows can be dynamically added by jquery after button click. I'm trying to do: after button click add new row(I do it) and replace previous row Html Elements(input type=text, textarea, select, input type=text, /[input type="checkbox" must be safe]) with its own values.

And after if i click on row(anyrow), i want to rollback previous operation. i.e. replace texts with html element. and htmlElement.val()=text.

Added after 30 minutes: I wrote for input type=text element and textarea element this.

$("#btnAdd").click(function() {
       $input = $('#mainTable tbody>tr:last').closest("tr").find("td > input:text");
       $input.replaceWith($input.val());
       $textArea = $('#mainTable tbody>tr:last').closest("tr").find("td > textarea");
       $textArea.replaceWith($textArea.val());
});

is this a good idea?