Split tab headers not removing active state

I'm trying to create a tab system for my website using jquery, css and html, i got it working when the tab headers were all combined however i want to split them, so some of the tab headers are on one side of the page and the rest are on the opposite. It all looks ok and when i click on the tab headers the tabs change, but the headers dont remove the active state on the previous tab, this must be because i split them.

Jquery:

jQuery(document).ready(function() {
            jQuery('.tabs .tab-links-left a').on('click', function(e)  {
                var currentAttrValue = jQuery(this).attr('href');

                // Show/Hide Tabs
                jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

                // Change/remove current tab to active
                jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

                //My added code
                jQuery('.tabs .tab-links-right').siblings().removeClass('active');

                e.preventDefault();
            });
        });



        jQuery(document).ready(function() {
            jQuery('.tabs .tab-links-right a').on('click', function(e)  {
                var currentAttrValue = jQuery(this).attr('href');

                // Show/Hide Tabs
                jQuery('.tabs ' + currentAttrValue).show().siblings().hide();


                // Change/remove current tab to active
                jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

                //My added code
                jQuery('.tabs .tab-links-left li').siblings().removeClass('active');

                e.preventDefault();
            });
        });

Here is the html for the headers

               <ul class="tab-links-left" >
                    <li class="active"><a href="#tab1">Home</a></li>
                    <li><a href="#tab2">Gallery</a></li>
                    <li><a href="#tab3">Services</a></li>


                </ul>

                <ul class="tab-links-right" >

                    <li><a href="#tab4">Testimonials</a></li>
                    <li><a href="#tab5">Contact</a></li>

                </ul>

Your problem is that the tabs in the opposite side are not

.siblings()

Of the other side.

I would recommend that you give all tabs a class

<li class="tab">

And then simply do the following when clicking a tab:

jQuery('.tab').removeClass('active'); //Remove the active state from all tabs
jQuery(this).parent('li').addClass('active'); //Add the active state to the clicked tab