一个页面上有两个jquery ui选项卡式div。一个有效，另一个不起作用

<div id="tabs">
  <ul>
    <li><a href="#tab1">选项卡1</a></li>
    <li><a href="#tab2">选项卡2</a></li>
  </ul>
  <div id="tab1">
    <!-- 选项卡1的内容 -->
  </div>
  <div id="tab2">
    <!-- 选项卡2的内容 -->
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">

$(document).ready(function() {
  $("#tabs").tabs();
});