multiple accordion not working for other tabs

multiple accordion not working for other tabs

I'm I have a multi-tab and would like to have a an accordion in each tab. What's happening is it only works on the 1st the tab and the rest does not show the accordion. Please help. Pretty new in jQuery & HTML Here's the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Paper Settings</title>
  <link rel="stylesheet" href="../jquery-ui-1.10.3.custom.css">
  <script src="../jquery-1.9.1.js"></script>
  <script src="../jquery.ui.core.js"></script>
  <script src="../Scripts/jquery.ui.widget.js"></script>
  <script src="../Scripts/jquery.ui.accordion.js"></script>
  <script src="../jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1">
    <div id="accordion">
      <h3>Section10</h3>
      <div><p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
      </div>
      <h3>Section20</h3>
      <div></div>
      <h3>Section30</h3>
      <div></div>
      <h3>Section40</h3>
      <div></div>  
  </div>
  <div id="fragment-2">
    <div id="accordion1">
      <h3>Section11</h3>
      <div><p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p></div>
      <h3>Section21</h3>
      <div></div>
      <h3>Section31</h3>
      <div></div>
      <h3>Section41</h3>
      <div></div>
    </div>  
  </div>
  <div id="fragment-3">
    <div id="accordion2">
      <h3>Section12</h3>
      <div><p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p></div>
      <h3>Section22</h3>
      <div></div>
      <h3>Section32</h3>
      <div></div>
      <h3>Section42</h3>    
      <div></div>
    </div>  
  </div>
</div>
<script>
  $( "#tabs" ).tabs();
  $( "#accordion" ).accordion();
  $( "#accordion1" ).accordion();
  $( "#accordion2" ).accordion();
</script>
</body>
</html>