jquery - 2 つの jquery UI タブの同期を維持する

Question

2 つの jquery UI タブを同期させようとしています。ホームページのタブはこちらからご覧いただけます。基本的に、Houston をクリックすると、別の Houston タブをクリックする必要があり、Austin についても同様です。

これが私がしたことです（非常に遅いため、コードを削除しました）：

jQuery(document).ready(function(){
    jQuery("a[href='#houston']", ".wp-tabs").on("click", function(){
        jQuery("a[href='#houston_locations']", ".wp-tabs").click();
    });

    jQuery("a[href='#austin']", ".wp-tabs").on("click", function(){
        jQuery("a[href='#austin-3']", ".wp-tabs").click();
    });

    jQuery("a[href='#houston_locations']", ".wp-tabs").on("click", function(){
        jQuery("a[href='#houston']", ".wp-tabs").click();
    });

    jQuery("a[href='#austin-3']", ".wp-tabs").on("click", function(){
        jQuery("a[href='#austin']", ".wp-tabs").click();
    });
});

上記の私のコードは機能します。ただし、非常に遅く、コンソールに「再帰が多すぎる」というエラーが表示されます。

他の誰かがより良い解決策を提供できますか?