Insert data after event.target (Owl Carousel)

Question

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);

Answer 1

Try this way: First of all you can not set more then ONE tag with the same ID at the html page. It wrong way of codding totaly. So set the div with class:

<div class="counter"></div>

In the js function change you string from:

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

To:

$(event.target).next('.counter').html("item "+item+" of "+items)

And you get: