Как добавить событие / триггер к javascript

Question

Я работаю на веб-странице фиктивного магазина и хочу подсчитать количество элементов, которые были добавлены в корзину.

Когда я перетаскиваю элемент на кнопку «Добавить в корзину», он меняет класс кнопки. Я пытаюсь сосчитать новый класс кнопок, используя .length, как показано ниже, но он не работает, потому что мой код загружается один раз при загрузке страницы.

var cartItems = document.getElementsByClassName('ui-state-highlight').length; 
var cart = document.getElementById('cart');
cart.textContent =  cartItems + " items";

Как мне заставить его работать в режиме реального времени и реагировать на изменения класса? Я только начинающий и буду признателен за вашу помощь!

$(function() {
  $("#draggable1").draggable({
    revert: "valid"
  });
  $("#draggable2").draggable({
    revert: "valid"
  });
  $("#draggable3").draggable({
    revert: "valid"
  });
  $("#draggable4").draggable({
    revert: "valid"
  });
  $("#droppable1").droppable({
    classes: {
      "ui-droppable-active": "ui-state-default"
    },
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("button.b1")
        .html("Added!");
    }
  });
});

<a href="#cart">Cart <img src="images/bag.png" style="width:20%; height:auto;"></a>
<span><i class="shopping-cart"></i></span>
<ul>
  <li id="cart"></li>
</ul>