JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<h1>Basic</h1>
		<p>adds the scrollbar only if the bottom one is present, does not recompute the top scrollbar</p>
        <div class="double-scroll">
            <table border="1">
                <tbody>
                    <tr>
                        <td>AAAAAAAAA</td>
                        <td>BBBBBBBBB</td>
                        <td>CCCCCCCCC</td>
                        <td>DDDDDDDDD</td>
                        <td>EEEEEEEEE</td>
                        <td>FFFFFFFFF</td>
                        <td>GGGGGGGGG</td>
                        <td>HHHHHHHHH</td>
                    </tr>
                    <tr>
                        <td>AAAAAAAAA</td>
                        <td>BBBBBBBBB</td>
                        <td>CCCCCCCCC</td>
                        <td>DDDDDDDDD</td>
                        <td>EEEEEEEEE</td>
                        <td>FFFFFFFFF</td>
                        <td>GGGGGGGGG</td>
                        <td>HHHHHHHHH</td>
                    </tr>
                    <tr>
                        <td>AAAAAAAAA</td>
                        <td>BBBBBBBBB</td>
                        <td>CCCCCCCCC</td>
                        <td>DDDDDDDDD</td>
                        <td>EEEEEEEEE</td>
                        <td>FFFFFFFFF</td>
                        <td>GGGGGGGGG</td>
                        <td>HHHHHHHHH</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="double-scroll">
            <table border="1">
                <tbody>
                    <tr>
                        <td>AAAAAAAAA</td>
                        <td>BBBBBBBBB</td>
                        <td>CCCCCCCCC</td>
                        <td>DDDDDDDDD</td>
                        <td>EEEEEEEEE</td>
                        <td>FFFFFFFFF</td>
                        <td>GGGGGGGGG</td>
                        <td>HHHHHHHHH</td>
...

CSS

.double-scroll {
                width: 400px;
                direction: rtl;
            }
            #sample2{
                width: 100%;
                direction: rtl;
            }

JavaScript

/*

PLUGIN STARTS - SEE THE CODE AT THE BOTTOM!

 * @name DoubleScroll
 * @desc displays scroll bar on top and on the bottom of the div
 * @requires jQuery
 *
 * @author Pawel Suwala - http://suwala.eu/
 * @author Antoine Vianey - http://www.astek.fr/
 * @version 0.5 (11-11-2015)
 *
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * 
 * Usage:
 * https://github.com/avianey/jqDoubleScroll
 */
 (function( $ ) {
 	
 	jQuery.fn.doubleScroll = function(userOptions) {
	
		// Default options
		var options = {
			contentElement: undefined, // Widest element, if not specified first child element will be used
			scrollCss: {                
				'overflow-x': 'auto',
				'overflow-y': 'hidden'
			},
			contentCss: {
				'overflow-x': 'auto',
				'overflow-y': 'hidden'
			},
			onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
			resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized
			timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
		};
	
		$.extend(true, options, userOptions);
	
		// do not modify
		// internal stuff
		$.extend(options, {
			topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper" style="height: 20px;"><div class="doubleScroll-scroll" style="height: 20px;"></div></div>',
			topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
			topScrollBarInnerSelector: '.doubleScroll-scroll'
		});

		var _showScrollBar = function($self, options) {

			if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
				// content doesn't scroll
				// remove any existing occurrence...
				$self.prev(options.topScrollBarWrapperSelector).remove();
				return;
			}
		
			// add div that will act as an upper scroll only if not already added to the DOM
			var $topScrollBar =...