jQuery append function is just appending the html but not the classes related to it

I may be off here but when you say “not the classes”, do you actually mean the Javascript/jQuery funcionality?

If so, I’ll try to explain what is happening: when you initialize a jQuery plugin, like select2, it acts upon what exists in the DOM at the moment you initialize it. So if you later create new items, these won’t have the select2 functionality, unless you initialize it again for said new items.

I suggest you create a function to initialize select2 and call it whenever you add new elements to your DOM. You’d need to somehow single out the elements that have already been initialized. You can do so with a class, in this example, the class is ‘select2-enabled’. Like this:

function initSelect2() {
  $(".select2").each(function(){
    if (!$(this).hasClass('select2-enabled')) {
      $(this).addClass('select2-enabled');
      $(this).select2({
        // all your select2 options
      });
    }
  });
}

And then, after you append your new html, you can call your function to initialize select2 on the new elements:

$(parentElement).append(newHTML);
initSelect2();