How to make independent numbering of slides in different sliders?

Question

JavaScript

You want the slide number to be reflected within the slide itself.

At the same time, in each slider on the page, so that it works individually.
Now everything works only in the first slider, even when working with the second, third, fifth, etc. sliders. There will be many sliders of the same type. You can make different classes for sliders, but I would like an optimal solution in js so as not to write duplicate code in js and css.

https://codepen.io/maxxxxxxxxxxxx/pen/qBOrayK

Answer 1

$('.bakeries-slider').each(function() {
  $('.bakeries-slider__span', this).text(i => `${i + 1}.`);
});