How to make multiple sets of ui tabs work with jquery 1.6.4?

How to make multiple sets of ui tabs work with jquery 1.6.4?

I made a website using a nice template when jquery 1.6.4 was new. Now I've added two sets of ui tabs using the code below that I found on jquerys site. It works like a charm on all pc's and on all Apple products. My problem though is that the jquery 1.9 version makes my site crash on android tablet and smartphones = it completely ends the whole internet session. Since my site worked before I added the 1.9 version, I'd like to adjust the code below to "communicate" with jquery 1.6.4 instead, but I haven't got a clue how to do that. Would anybody please help me?

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
    $(function() {
    $( "#tabs, #tabs20" ).tabs();
    });
    </script>
   
    <div id="tabs">
     <div class="tabcontainer">
      <ul class="tabs">
       <li><a href="#tab1">Tab 1:1</a></li>
       <li><a href="#tab2">Tab 1:2</a></li>
       <li><a href="#tab3">Tab 1:3</a></li>
      </ul>
      <div id="tab-body">
       <div id="tab1" class="tab-content">
        <p>Text 1:1</p>
       </div>
       <div id="tab2" class="tab-content">
        <pText 1:2</p>
       </div>
       <div id="tab3" class="tab-content">
        <p>Text 1:3</p>
       </div>
      </div>
     </div>
    </div>
   
    <div id="tabs20">
     <div class="tabcontainer">
      <ul class="tabs">
       <li><a href="#tab21">Tab 2:1</a></li>
       <li><a href="#tab22">Tab 2:2</a></li>
       <li><a href="#tab23">Tab 2:3</a></li>
      </ul>
      <div id="tab-body">
       <div id="tab21" class="tab-content">
        <p>Text 2:1</p>
       </div>
       <div id="tab22" class="tab-content">
        <pText 2:2</p>
       </div>
       <div id="tab23" class="tab-content">
        <p>Text 2:3</p>
       </div>
      </div>
     </div>
    </div>