How to "edit in place" jQuery UI tab name?

Question

I would like to be able to change the title of each of my tabs using Jeditable. It almost works, except that the tabs end up stuck in the wrong state (always hilited) and clicking the editable doesn't also select the tab it's part of.

Thanks in advance for any help!

<script type="text/javascript">
 $(document).ready(function() {
        $("#tabsWoodwind, #tabsBrass, #tabsPercussion, #tabsString").tabs({ cookie: { expires: 30} }).find(".ui-tabs-nav").sortable({ axis: 'x' });
        //getter
        var cookie = $("#tabsWoodwind, #tabsBrass, #tabsPercussion, #tabsString").tabs("option", "cookie");
        //setter
        $("#tabsWoodwind, #tabsBrass, #tabsPercussion, #tabsString").tabs("option", "cookie", { expires: 30 });
        $("#switcher").themeswitcher();
        var editInPlace = function() {
            $('.edit').editable('admin_roomNameChange.asp', {
                tooltip: 'Click to edit...',
                height: '20px',
                width: '120px',
                style: 'inherit',
                cssclass: 'roomInfo'
            });
        }
        $('.edit').click(editInPlace);
    });
</script>