ok I got it to work!
I think my mistake was that I had placed the "load more" button outside the k2 wrapper.
I still had to replace $ with jQuery because I was getting an TypeError: $ is undefined - the same happened with beez3 template

Thank you

Even though it works I've noticed something, that it might not cause any issues in the default templates, it does though cause issues with mine.


The structure is:

The way I understand append, the extra items should be loaded under the last itemContainer

Instead the script creates this:

why is it duplicating the content div? Having two divs with the same id is not exactly correct either.

obviously I don't have a clue what I'm talking about, but it might have to do with this line?

well I did manage to get the results I wanted by changing

to

This was what I was looking for. However, this method obviously does not trigger K2's onK2AfterDisplayContent which is what my plug-in needs in order to trigger. Any way to trigger this client side in the JS?

This does work, however as Dimitris pointed in default the containers under itemListLeading conflict with the template i am using, it works but once i load more items the styling gets slightly messed up. I tried Dimitiris suggestion by using:
var items = $(data).find(".itemContainer");

But then it does not load the clr divs.

There was mention of updating the code but i think it hasn't been posted.