ajax - jquery replace each input with it's value. then switch/toggle back to having inputs -

i have table created ajax request. each of tds have textbox input inside it. allows user edit content. want have "read only" mode user can't edit content (at user's discretion). this, want user able press button (radio buttons fine) replaces each of textbox inputs

tag containing value of text box text. currently, code replaces each of inputs text "object object". (maybe haven't converted values text strings correctly??) tips let me know what's going wrong appreaciated. thanks!!

this current script:

<script type="text/javascript">     $("#permissionsbutton").live('click',function(){         sss = $('.cells').each(function(){$(this).val()});         $(".cells").replacewith("<p class='readonlycells' type='text'>" + sss + "</p>");     });     // if worked, write few lines     // able switch having inputs </script> 

and snippet of html like:

<div id="readwrite" class="settings">     <h3>permissions</h3>     <button id="permissionsbutton">switch read mode</button> </div> <table><tr>     <td><input class='cells' type=text value='steve'></td>     <td><input class='cells' type=text value='mary'></td>     <td><input class='cells' type=text value='big bird'></td> </tr></table> 

jquery's each function returns jquery object called on ($('cells') in case). current code replacing each element matched .cells selector jquery object, serializing "object object".

what want more like

$("#permissionsbutton").live('click', function() {     $(".cells").each(function() {         $(this).replacewith($(this).val());     } });