Hello everyone,

I actully have 2 Problems.

I created the following form, from which I can create multiple forms with the method clone(). With sortable() I can sort these Forms, I have created. everything works.

Problem 1: After I've changed the order of the created Forms, I can not create a new Forms anymore (clone () does not work anyhow).

Problem 2: I have added a button "send". When I click on "Send" button a java servlet is invoked. It works. Now if I add src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> , the button "send" doesn't react, when I click on it , I don't have any Idea, what could be a reason.

I hope someone can help me, I'm already on doubts
Code:
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>template </title>
    <link type="text/css" href="css/redmond/jquery-ui-1.8.16.custom.css"
        rel="stylesheet" />
    <style type="text/css">
    label,input {
        display: block;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript">
        $(function() {
            var stop = false;
            $("#accordion1 h3").click(function(event) {
                if (stop) {
                    event.stopImmediatePropagation();
                    event.preventDefault();
                    stop = false;
                }
            });
            $("#accordion1").accordion({
                header : "> div > h3"
            }).sortable({
                axis: "y",
                handle : "h3",
                stop : function() {
                    stop = true;
                }
            });
        });
        $(function() {
            $('form').form();
            $('#tabs').tabs();
            $('.addContent').button({
                label : "Abschnitt hinzufügen",
                icons : {
                    primary : 'ui-icon-circle-plus'
                }
            });
            $('.addContent').click(function(){
                    var num     = $('.clonedDiv').length;
                    var newNum  = num + 1;     
                    var newElem = $('#accordion' + num).clone(true).attr('id', 'accordion' + newNum);
                    newElem.children(':first').children(':first').children(':last').html('Section '+newNum);
                       $(newElem).find('#abschnitt'+num).attr('id','abschnitt'+newNum);
                    $(newElem).find('#ueberschirft'+num).attr('id','ueberschrift'+newNum);
                    $(newElem).find('#einleitungstext'+num).attr('id','einleitungstext'+newNum);
                    $(newElem).find('#inhalt'+num).attr('id','inhalt'+newNum);
                   
                    $('#accordion' + num).after(newElem);
                  });    });
          
    </script>
    <style type="text/css">
    body {
        font-size: 80%;
        font-family: "Trebuchet MS", sans-serif;
        margin: 50px;
    }
    </style>
    </head>
    <body>
        <form action="MyServlet" method="post">
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Header</a></li>
                    <li><a href="#tabs-2">Einleitung</a></li>
                    <li><a href="#tabs-3">Inhalte</a></li>
                </ul>
                <div id="tabs-1">
                    <div>
                        <fieldset>
                            <label for="nummer">Nummer<br /> <input type="text"
                                name="nummer" id="nummer"></label><br />
                        </fieldset>
                    </div>
                </div>
                <div id="tabs-2      </div>
                <div id="tabs-3">
                               <span class="addContent"></span>
                    <div id="accordion1" class="clonedDiv">
                        <div>
                            <h3>
                                <a id="section1" href="#">Section 1</a>
                            </h3>
                            <div>
                                <fieldset  style="clear: both">
                                    <label for="abschnitt1">Abschnittsname</label>
                                    <input type="text" name="abschnitt1" id="abschnitt1" value="" class="text ui-corner-all">
                                    <label for="ueberschrift1">Überschrift</label>
                                    <input type="text" name="ueberschrift1" id="ueberschrift1" value="" class="text ui-corner-all">
                                    <label for="einleitungstext1">Einleitungstext</label>
                                    <textarea name="einleitungstext1" id="einleitungstext1"    class="text ui-corner-all" style="height: 5em;"></textarea>
                                    <label for="inhalt1">Inhalt</label>
                                    <textarea name="inhalt1" id="inhalt1" class="text ui-corner-all"></textarea>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <input type="submit" value="Send">      
        </form>