Reverse ul List, first item not clickable

Reverse ul List, first item not clickable

Hey guys,

I'm encountering some slight problems using a reversed order as tab selector.
e.g: Content to display: One, Two, Three, Four, and tabs: 4,3,2,1

So first element is showing One, but clicking on 4 does not work,
Switching the tab programmatically with
  1.  $("#tabs").tabs( "select" , "#tabs-4" );
doesn't work at all.

Does anyone have a solution for this?

here is a slim example illustrating my issue:
  1. <!DOCTYPE html>
    <html dir="ltr" lang="en-US">
    <head>
    <meta charset="UTF-8" />
    <title>JQuery Tab Test</title>
    <style>
    .ui-tabs .ui-tabs-hide { display: none !important; }
    </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                $("#tabs").tabs();
            });
        </script>
    </head>

    <body class="bg-dark">
    <div id="tabs">
        <div id="tabs-1"> ONE </div>
        <div id="tabs-2"> TWO </div>
         <div id="tabs-3"> THREE </div>
        <div id="tabs-4"> FOUR </div>
     
        <ul> 
            <li><a href='#tabs-4'>4</a></li>
            <li><a href='#tabs-3'>3</a></li>
            <li><a href='#tabs-2'>2</a></li>
            <li><a href='#tabs-1'>1</a></li>   
        </ul>
    </div>

    </body>
    </html>

    </body>
    </html>