Automating a function each JS/Jquery

Question

I have a problem automating a function in JS / Jquery. I have the following code:

        $('.tab-pane').each(function(index, el) {
          tipo = $(this).attr('id');
          $("#owl-carousel-" + tipo).owlCarousel({
            loop: true,
            nav: true,
            items: 1,
            dots: true
          });
          $('#owl-carousel-' + tipo + ' .owl-page').each(function(index, el) {
            numberTotal = index;
          });
          $('#numbertotal' + tipo).text(numberTotal + 1);


          // Custom Navigation Events
          $("#" + tipo + " .btn-next").click(function() {
            $("#owl-carousel-" + tipo).trigger('owl.next');
            verificaActive(tipo);
          });
          $("#" + tipo + " .btn-prev").click(function() {
            $("#owl-carousel-" + tipo).trigger('owl.prev');
            verificaActive(tipo);
          });
        });

I iterate on all Ivs that have the class ". tab-pane" and take your ID as a parameter for the rest of the function. So far everything ok, the problem is in the click function, because it is assigning only the last iteration and about write them.

Does anyone know a way to do this without taking parameters from the click button to be automated?

Thanks in advance ;)

EDIT

@juniorNunes here is the HTML, you will have other blocks like this changing the ID. The button block has to be one for each slide and accurate through that script add functions to change between slides.

I added the "data-type" in the buttons just to work, but this way I have to add in all buttons and to avoid errors if you forget or any typo the ideal would be to catch this type by Js only by the parent div ID.

<div role="tabpanel" class="tab-pane" id="central">
  <div class="owl-carousel" id="owl-carousel-central">
    <div class="item">
      <span>Slide 1</span>
    </div>
    <div class="item">
      <span>Slide 2</span>
    </div>
    <div class="item">
      <span>Slide 3</span>
    </div>
  </div>
  <div class="paginacao">
    <div class="btn-owl btn-first" data-tipo="central">
      <<</div>
        <div class="btn-owl btn-prev" data-tipo="central">
          <</div>

            <div class="contagem-slides">
              <span id="numbercurrentcentral"></span><span> de <span id="numbertotalcentral">8</span></span>
            </div>

            <div class="btn-owl btn-next" data-tipo="central">></div>
            <div class="btn-owl btn-last" data-tipo="central">>></div>
        </div>
    </div>

Answer 1

See if this will work:

$('.tab-pane').each(function(index, el) {
  var id = $(el).prop('id');

  $(el).owlCarousel({
    loop:true,
    nav:true,
    items:1,
    dots: true
  });

  $(el).find('.owl-page').each(function(index, elm) {
    numberTotal = index;    
  });

  $('#numbertotal'+id).text(numberTotal+1);

  // Custom Navigation Events
  $(el).find('.btn-next').click(function(){
    $("#owl-carousel-"+id).trigger('owl.next');
    verificaActive(id);
  });
  $(el).find('.btn-prev').click(function(){
    $("#owl-carousel-"+id).trigger('owl.prev');
    verificaActive(id);
  });
});