Trouble with Moving select2 content AND changing a property


#1

I posted this on stackoverflow as well but have yet to get a response and I just discovered this forum today so please forgive me for double posting.

I have a select2 element in my form. I need it to move on the page depending on options selected by the user. When I move the span element that contains the HTML which has the select2 input, the select2 still works just fine. BUT, if I change the maximumSelectionLength AFTER moving, the select2 no longer works. I’m using this code to move the HTML:

$('#rocketBox').append( $('#disciplineBox>span'));

and then this line of code to change the maximumSelectionLength (originally 6):

$("#disciplinesCoveredID").select2({ maximumSelectionLength: 3});

To be clear, I can do ONE or the OTHER and the select2 functions correctly, but if I do both (doesn’t matter what order, I’ve tried it both ways) then the select2 will not allow me to select anything. If I click in the form element, it just loses focus immediately.

Any ideas?