Help my accordions are busted

Help my accordions are busted

I have this script and it is not doing what I expected it to do
//do some AJAX to call the method instead of the browser
         $("a.navlink").click(function (ev) {
            $(this).toggleClass("active");
            ev.preventDefault();
            var id = $(this).attr("id")
            if ($(this).hasClass("active")) {
               $("."+id).remove();
            }
            else {   
            //$(this).toggleClass("active");
                 var url = $(this).attr("href");
                   $.ajax ({
                       url:  url,
                       type: "POST",
                       success : function (html) {
                           $("#accordion").append(html).accordion({active:false, header:'h2', collapsible:true});
                     //   $('#accordion').accordion({active:false, header:'h2', collapsible:true});
                        //alert(accordion())
                       }
                   });
            }
         });


Essentially I am making a website where the user creates their own website, they add and delete elements from a DIV, the added elements should appended to a div and make into an accordian, however only the first element that is added is an accordion style, how can I over come this?