tablesorter + metadataプラグインを使用して、ソート可能なテーブルを作成しています。
ボタンのラベルに対応した値によってソートしたいのですが、ボタンを押した際にその値を変更した後にソートを行っても、ソート順が正しく表示されません。

どのようにすれば正しくボタンのラベルに対応した値でソートできるようになるでしょうか？

<!DOCTYPE html>
<html>
    <head>
        <script src="js/jquery.js"></script>
        <script src="js/jquery.tablesorter.js"></script>
        <script src="js/jquery.tablesorter.widgets.js"></script>
        <script src="js/jquery.metadata.js"></script>
        <script>
            $(function() {
                $('#table').tablesorter({
                    debug: true
                });
                $('button').click(function() {
                    if ($(this).text() == "A") {
                        $(this).text("B").parent().removeClass("{sortValue:1}").addClass("{sortValue:2}");
                    } else {
                        $(this).text("A").parent().removeClass("{sortValue:2}").addClass("{sortValue:1}");
                    }
                    $('#table').trigger("update");
                });
            });
        </script>
    </head>
    <body>
        <table id="table" class="tablesorter">
            <thead>
                <tr><th class="{sorter:'metadata'}">ボタン</th><th>値</th></tr>
            </thead>
            <tbody>
                <tr><td class="{sortValue:1}"><button>A</button></td><td>1</td></tr>
                <tr><td class="{sortValue:2}"><button>B</button></td><td>2</td></tr>
                <tr><td class="{sortValue:2}"><button>B</button></td><td>3</td></tr>
                <tr><td class="{sortValue:2}"><button>B</button></td><td>4</td></tr>
                <tr><td class="{sortValue:1}"><button>A</button></td><td>5</td></tr>
            </tbody>
        </table>
    </body>
</html>