Synchronize upper and lower tabs on a form

I have a tall form in which a user has access to three tabs on top and three corresponding tabs on the bottom.

I'm trying to write javascript\jquery to keep the tabs in sync(active) depending upon which is selected.

So here are my upper tabs:

<ul id="Tabs" class="nav nav-tabs">
        <li class="active"><a href="#pm" data-toggle="tab" id="pmTab">PM</a></li>
        <li><a href="#engineer" data-toggle="tab" id="engineerTab">Engineer</a></li>
        <li><a href="#contractor" data-toggle="tab" id="contractingTab">Contracting</a></li>
    </ul>

<div class="tab-content well"> .....

Select allOpen in new window

Here are my lower tabs

...</div>
 <div id="BottomTabs" class="tabbable tabs-below">
            <ul id="TabsBelow" class="nav nav-tabs">
                <li class="active"><a href="#pm" data-toggle="tab" id="pmTabBottom">PM</a></li>
                <li><a href="#engineer" data-toggle="tab" id="engineerTabBottom">Engineer</a></li>
                <li><a href="#contractor" data-toggle="tab" id="contractingTabBottom">Contracting</a></li>
            </ul>
        </div>

Select allOpen in new window

Now here are my click events

 function BindTabClickEvents() {
            $('#Tabs a, #TabsBelow a').click(function (e) {
                e.preventDefault();
                
                $(".nav-tabs li").each(function(element) {
                    $(this).removeClass("active");
                });

                $(this).addClass("active");
               

                switch ($(this).html()) {
                    case "PM":
                       
                        if (e.target.id === "pmTab") {
                            $('#pmTabBottom').addClass("active");
                        } else {
                            $('#pmTab').addClass("active");
                        }
                        break;
                    case "Engineer":
                       if (e.target.id === "engineerTab") {
                            $('#engineerTabBottom').addClass("active");
                        } else {
                            $('#engineerTab').addClass("active");
                        }
                        break;
                    case "Contracting":
                        $('#programNameContracting').html($("#ProgramName").val());
                        if (e.target.id === "contractingTab") {
                            $('#contractingTabBottom').addClass("active");
                        } else {
                           $('#contractingTab').addClass("active");
                        }
                        break;
                }

                $(this).tab('show');
            });
        }

Select allOpen in new window

The case statement is assigning the "Active" class but the corresponding tab does not look "active". Also, the other tabs seem to be retaining the active class even after I iterate through them and remove it.