Счетчик с несколькими каруселями на одной странице (Bootstrap v4.3.1)

Question

Я использую следующий код, чтобы показать счетчик изображений в карусели. Это отлично работает, но мне нужно, чтобы это работало для нескольких каруселей на одной странице. Счетчик запутывается, точнее, div, показывающий, что счетчик получает номер первой карусели после того, как первый слайд соскользнет. Я назначил идентификаторы на карусели броска Wordpress ACF. Есть идеи?

<div id="carousel-1" class="carousel slide" data-ride="carousel">

      <div class="carousel-inner">

            <div class="carousel-1 carousel-item">
              <div class="view">          
                <img class="d-block w-100 active" src="" alt="">
              </div>
            </div>

            <div class="carousel-1 carousel-item">
              <div class="view">          
                <img class="d-block w-100" src="" alt="">
              </div>
            </div>

      </div>

</div>
<div class="numslide-1"></div>

<div id="carousel-2" class="carousel slide" data-ride="carousel">

      <div class="carousel-inner">

            <div class="carousel-2 carousel-item">
              <div class="view">          
                <img class="d-block w-100 active" src="" alt="">
              </div>
            </div>

            <div class="carousel-2 carousel-item">
              <div class="view">          
                <img class="d-block w-100" src="" alt="">
              </div>
            </div>

      </div>

</div>
<div class="numslide-2"></div>



<script>
var carouselData = $(this).data('bs.carousel');
var totalItems = $('.carousel-1').length;
var currentIndex = $('div.active').index() + 1;
$('.numslide-1').html(''+currentIndex+'/'+totalItems+'');

$('#carousel-1').on('slid.bs.carousel', function() {
    currentIndex = $('div.active').index() + 1;
   $('.numslide-1').html(''+currentIndex+'/'+totalItems+'');
});
</script>

<script>
var carouselData = $(this).data('bs.carousel');
var totalItems = $('.carousel-2').length;
var currentIndex = $('div.active').index() + 1;
$('.numslide-2').html(''+currentIndex+'/'+totalItems+'');

$('#carousel-2').on('slid.bs.carousel', function() {
    currentIndex = $('div.active').index() + 1;
   $('.numslide-2').html(''+currentIndex+'/'+totalItems+'');
});
</script>

Я использую Bootstrap v4.3.1. Спасибо!

Спасибо