Untitled

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>FreeFinder</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <style>
        #lesson_widget { list-style-type: none; margin: 0; padding: 0; width: 50%; font-size: 62.5%; }
        #lesson_widget li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
        #lesson_widget li span { position: absolute; margin-left: -1.3em; }
    </style>

    <script>
    $(function() {
        var TagList_Lesson = [
            "Maths",
            "English",
            "ICT",
            "Science",
            "Technology",
        ];
        $( "#new_tag-title" ).autocomplete({
            source: TagList_Lesson
        });

        var TagList_Teacher = [""];
        $( "#new_tag-teacher" ).autocomplete({
            source: TagList_Teacher
        });

        var TagList_Room = [""];
        $( "#new_tag-room" ).autocomplete({
            source: TagList_Room
        });

        $( "#lesson_widget" ).sortable();
        $( "#lesson_widget" ).disableSelection();


        var buttonCount = 0;
        $('#create_new_lesson_button').click(function() {

            var LessonTitle = $('#new_tag-title').val();
            var LessonTeacher = $('#new_tag-teacher').val();
            var LessonRoom = $('#new_tag-room').val();

            //$("#lesson_widget").append(  '<li class="ui-state-default"><div><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + LessonTitle + '<br />' + LessonTeacher + '<br />' + LessonRoom + '</div></li>'  );
            $("#lesson_widget").append(  '<input type="submit" id="lesson_button" data-id=' + buttonCount + ' value="' + LessonTitle + '&#10' + LessonTeacher + '&#10' + LessonRoom + '" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false"/>');

            TagList_Lesson.push(LessonTitle);
            TagList_Teacher.push(LessonTeacher);
            TagList_Room.push(LessonRoom);

            buttonCount ++;
        });
        $('#lesson-widget button').click(function() {  alert("asd"); } );

    });


    </script>
</head>
<body>

    <div class="ui-widget" id="create_new_lesson_widget">

        <table border="0">
            <tr>
                <td><label for="tags">Lesson </label></td>
                <td><input type="text" id="new_tag-title" /></td>
            </tr>
            <tr>
                <td><label for="tags">Teacher </label></td>
                <td><input type="text" id="new_tag-teacher" /></td><td><input type="submit" id="create_new_lesson_button" value="Add lesson" /></td>
            </tr>
            <tr>
                <td><label for="tags">Room </label></td>
                <td><input type="text" id="new_tag-room" /></td>
            </tr>
        </table>


    </div>

    <div class="ui-widget" id="lesson_widget"> <!-- Holds the lessons -->

    </div>

    <div class="ui-widget" id="timetable"></div>


</body>
</html>