Can not add dynamically items to Owl Carousel in Javascript

Question

I'm trying to dynamically add items to an Owl carousel. Here is how I'm doing it:

HTML

<div id="avatar-carousel" class="owl-carousel lesson-carousel">
                                            <div class="item item-logo">
                                              <div class="product-item">
                                                <div class="carousel-thumb" style="height: 77px!important;width: 70px;" >
                                                      <img src="http://placehold.it/140x100" alt="">
                                                </div>
                                              </div>
                                            </div>
                                              <!-- Start Item -->
                                        </div>

                                        <button id="click">
                                        click
                                        </button>

JS

$("#avatar-carousel").owlCarousel({

      items: 5
  });

  $("#click").click(function(){
    $('#avatar-carousel').trigger('add.owl.carousel', ['<div class="item"><p>' + 'hh' + '</p></div>'])
                    .trigger('refresh.owl.carousel');
  });

Nothing happens with this code. I can't see the error. Here is the fiddle: JSFiddle.

EDIT:

Seems like the code is correct, as it's working in the fiddle. I forgot to mention that the carousel works just fine, it is loaded correctly in the beginning. The issue is when trying to add items. Nothing happens, no errors but items are not added.

Solution

There can be two regular errors:

1. The button does not exist in time you create onclick event.
   • make sure the button exists in time you assign the event.
2. The carousel is inside the <form> and clicking the button submits the entire form (pay attention at browser page loading). Error shown here.
   • solution would be to prevent default action for the event:

$(document).ready(function() {
    $("#avatar-carousel").owlCarousel({
        nav: true,
        items: 5
    });

});

$("#click").click(function(e) {
    e.preventDefault(); //-- prevent form submit
    $('#avatar-carousel').trigger('add.owl.carousel', ['<div class="item"><img src="http://placehold.it/140x100" alt=""></div>'])
        .trigger('refresh.owl.carousel');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<form action="" method="post">
    <div id="avatar-carousel" class="owl-carousel">
        <div class="item item-logo">
            <img src="http://placehold.it/140x100" alt="">
        </div>
    </div>
    <button id="click">
        click
    </button>
</form>