tagit.js fire after click

Im trying to use tagit.js from Aehlke.

so my problem is i have a "add" button and after click on that button i want to add a new row which contains the ul-element. if i append the ul-element after the user clicks on the button the function of "tag it.js" don't modify the ul.

so is there a way to fire the tagit.js after the user clicks on the button? btw: it should look like the tags section here @SO

here's a little bit of code (pls keep in mind im new @ajax)

var max_fields = 10;
var x = 1;
        
$(".button.addoptions").on("click", function(e) {
  e.preventDefault();
                
  if(x < max_fields){
    x++;
            
        $(".addform-optionals").append("<ul id='tagit'></ul>");
  }    
});

$('#tagit').tagit();

thanks for any kind of help