The product gets into the cart carousel only on the 3rd attempt - why?

Question

css

Hello! There is an online store with a basket, and there is an additional basket (it takes goods from the first basket) on the page in which the goods are loaded into the carousel. The problem is precisely in the additional basket: the first time you try to add a product in the additional basket, an empty field is displayed with the inscription "basket empty", the second time you click on the add button, the empty field is deleted and nothing else is displayed, and already on the 3rd, the product is displayed as expected, but it only shows the 3rd product from the cart, and the first 2 are visible only in the main .. Somewhere some condition does not work .. can you help?

<div class="widget_shopping_cart_content">
  <ul class="cart_list product_list_widget ">
    <!-- сюда выводятся товары помещаемые в корзину -->
  </ul>
</div>
<div id="foot-carousel" class="owl-carousel">
  <div>
<!-- здесь формируется карусель -->
    <div class="empty"></div>
  </div>
</div>

$('#foot-carousel').owlCarousel({
  items: 3,
  navigation: true,
  navigationText: ["", ""],
});

$(".add_to_cart_button").click(function() {
  $("#foot-carousel div:contains('Корзина пуста.')").remove();

  $('#foot-carousel').data('owlCarousel').addItem('<div>' + $('.cart_list li:last').html() + '</div>');
  $(".fixed-bottom").show().fadeTo("slow");
});

Answer 1

$(".add_to_cart_button").click(function() {
  $("#foot-carousel div:contains('Корзина пуста.')").remove();

  $('#foot-carousel').data('owlCarousel').addItem('<div>' + $('.cart_list li:last').html() + '</div>');
  $(".fixed-bottom").show().fadeTo("slow");
});

Change the logic of this piece.