Stacked dialogs ui-widgets inside

HTML

<div id="start-box" title="First Form">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Form</p>
  <a id="add" href="#">Add/Edit</a>
  <div id="add-box">
    <div id="accordian">
      <h3> One </h3>
      <div>
        contents of 1st section contents of 1st section contents of 1st section contents of 1st section
      </div>
      <!--end section 1 div -->
      <h3> Two </h3>
      <div>
        2nd section 2nd section 2nd section 2nd section2nd section 2nd section
      </div>
      <!--end section 2 div -->
      <h3>  Three  </h3>
      <div>
        another one....another one....another one....another one....another one....another one....
      </div>
      <!--end section 3 div -->
    </div>
    <!--end accordian div -->
  </div>
  <!--end add box div -->
  <script>
    $("#add-box").dialog({
      autoOpen: false,
      resizable: true,
      modal: true,
      buttons: {
        "Submit": function() {
          // do stuff 
          $(this).dialog("close");
        },
        "Cancel": function() {
          $(this).dialog("close");
        }
      }
    });

  </script>
</div>


<a id="start" href="#dialog-conf">Start Here</a>

CSS

body {
      font-size: 62.5%;
    }
    
    label,
    input {
      display: block;
    }
    
    input.text {
      margin-bottom: 12px;
      width: 95%;
      padding: .4em;
    }
    
    fieldset {
      padding: 0;
      border: 0;
      margin-top: 25px;
    }
    
    h1 {
      font-size: 1.2em;
      margin: .6em 0;
    }
    
    div#users-contain {
      width: 350px;
      margin: 20px 0;
    }
    
    div#users-contain table {
      margin: 1em 0;
      border-collapse: collapse;
      width: 100%;
    }
    
    div#users-contain table td,
    div#users-contain table th {
      border: 1px solid #eee;
      padding: .6em 10px;
      text-align: left;
    }
    
    .ui-dialog .ui-state-error {
      padding: .3em;
    }
    
    .validateTips {
      border: 1px solid transparent;
      padding: 0.3em;
    }

JavaScript

$(function() {
    $("#start-box").dialog({
      autoOpen: false,
      resizable: false,
      height: 340,
      modal: true,
      buttons: {
        "Save": function() {
          $(this).dialog("close");
        },
        Cancel: function() {
          $(this).dialog("close");
        }
      }
    });
    $("#start").button();
    $("#start").click(function() {
      $("#start-box").dialog("open");
    });
    $("#start-box").on("click", "#add", function(e) {
      console.log("Launching Add Box.");
      $("#add-box").dialog("open");
      $("#accordian").accordian(); //where should this go??

    });
  });