The javascript you have provided is creating multiple inplace editors. I would change it like this.
for all the fields that you want to have editable add a specific class to those fields. I see you already have the editable class on the <h2>
above - lets use that.
When the DOM is loaded trigger all those elements with that class to be inplace editors like this
document.observe("dom:loaded",function(){
$$('.editable').each(function(element){
new Ajax.InPlaceEditor(element,
'<?PHP echo base_url();?>saveajax/'+id, {
rows : 1,
cols : 15,
okText: 'Save',
formClassName: 'input-edit',
callback: function(form, value) { return 'table=' + table + '&field=' + field + '&value=' + escape(value) },
}
);
});
});
Now there will only be 1 instance of the inplace editor for each field. The inplace editor handles the on click turn into an editable field part.
as far as the row and cols problem if you set the rows and cols options in the instance for exactly what you want that should help - I've added them to my example