Insert data after event.target (Owl Carousel)

I am following this codepen here to insert the current and total number of slides on an Owl carousel. Trouble is it targets a div with ID #counter. So if there are multiple carousels on the same page then the value is always overwritten for both and not the current slider.

I dont seem to be able to manipulate the contents of event.target as it appears to be read only.

I have found if I change this line:

$('#counter').html("item "+item+" of "+items)

To this then it works. But the new value is always appended and I don’t seem to be able to replace it.

$(event.target).append(item+" - "+items);