Double Scrollbar with Plugin Jquery in table

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keyword" content="NGLESSON">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>2WDScroll Double Scrollbar Plugin Example</title>
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.2/superhero/bootstrap.min.css">
</head>
<body>
        <div class="container mt-5 mb-5">
        <div class="row my-3">
            <div class="col-12">
                <div id="example" class="ts pt-2">
                    <table style="width:600px;" class="table table-bordered table-striped">
                      <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Age</th>
                      </tr>
                      <tr>
                        <td>Mohammed</td>
                        <td>Idrissi</td>
                        <td>60</td>
                      </tr>
                      <tr>
                        <td>Mezgani</td>
                        <td>Said</td>
                        <td>74</td>
                      </tr>
                      <tr>
                        <td>Saadia</td>
                        <td>Sadqi</td>
                        <td>50</td>
                      </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
    <script src="script.js"></script>
    <script>
        $( document ).ready(function() {
            $('.ts').TwoWDScroll(350,195);
        });
    </script>
    </body>
</html>

/*
	* TwoWDScroll 1.0.0 (Alias : 2WDScroll) Alpha
    * Description : Can be used to add custom scrollbar on top of defined element in addition to default scrollbar in bottom, end result is a doubled scrollbar
    * Release : 01/01/2021
    * Author : Indunil Ramadasa 
    * https://guirama.medium.com/ 
    * https://github.com/iramguir/2WDScroll
    * https://www.jsdelivr.com/package/npm/2wdscroll 
    
    * Licensed under the GNU Public license v3.0
*/
(function($) {
	$.fn.TwoWDScroll = function(twoD_width,twoD_minWidth=twoD_width) {
        var this_target =  $('#'+$(this).attr('id'));

            var twod_num_matches = $(this).length;
            var twod_matches = new Array();
            $(this).each(function(index){
                var this_target = $(this).attr('id');
                if(this_target.length > 0)
                    twod_matches.push(this_target);
                else
                    TwoWDScrollError('Matched element with no ID found');
            });
        
        
            for(i=0;i < twod_num_matches; i++ )
            {
                var this_2wd_id = twod_matches[i];//this_target.attr('id');   
                var this_2wd_parent_id = this_2wd_id+'_2wdParent';
 
                $("#"+this_2wd_id).wrap( '<div class="twowdwrapper" id="'+this_2wd_parent_id+'"></div>' );

                $('#'+this_2wd_parent_id).css('width',twoD_width);
                $('#'+this_2wd_parent_id).css('min-width',twoD_minWidth); 

                $('#'+this_2wd_parent_id).css('transform','rotateX(180deg)');
                $('#'+this_2wd_parent_id).css('overflow-x','auto');
                $('#'+this_2wd_parent_id).css('overflow-y','visible');            
                $('#'+this_2wd_id).css('transform','rotateX(180deg)');


                var this_2wd_innerWidth = $('#'+this_2wd_parent_id)[0].scrollWidth;

                var this_2wd_footer_html = '<div id="'+this_2wd_id+'_footer" class="twowdfooter" style="max-width:'+twoD_width+'px;overflow-y:hidden;">';
                this_2wd_footer_html += '<div style="width:'+(this_2wd_innerWidth)+'px;height:20px;"  id="'+this_2wd_id+'_footer_scroll">';
                this_2wd_footer_html += '</div></div>';
                $(this_2wd_footer_html).insertAfter('#'+this_2wd_parent_id);

                $('#'+this_2wd_parent_id).scroll(function () { 

                    $('#'+this_2wd_id+'_footer').scrollLeft($('#'+this_2wd_parent_id).scrollLeft());
                });
                $('#'+this_2wd_id+'_footer').scroll(function () { 

                    $('#'+this_2wd_parent_id).scrollLeft($('#'+this_2wd_id+'_footer').scrollLeft());
                });
                
            }          
            
            $('.twowdwrapper').each(function(){
                var elem_id = $(this).attr('id').replace('_2wdParent','');    
                $('#'+ $(this).attr('id')).scroll(function () { 
                    $('#'+elem_id+'_footer').scrollLeft($('#'+elem_id+'_2wdParent').scrollLeft());
                });
            });
                     
            
            $('.twowdfooter').each(function(){
                var elem_id = $(this).attr('id').replace('_footer','');   
                $('#'+ $(this).attr('id')).scroll(function () { 
                    $('#'+elem_id+'_2wdParent').scrollLeft($('#'+elem_id+'_footer').scrollLeft());
                });
            });
        
        
        var TwoWDScrollError = function(msg){
            console.log('2wdScroll Error : '+msg)
        }
    }
})(jQuery);