Проблема с получением length у динамически добавляемых элементов

Необходимо:  
вывести количество выбранных элементов/мест на страницу.  
Сейчас:  
при выборе трёх мест, вместо цифры 3 выводится "012".  
Понимаю, что ответ лежит где-то на поверхности, но объясните, пожалуйста, что не так?

jQuery(document).ready(function() {

  $(function() {
    $(".scheme-seat").click(function() {
      $(this).toggleClass("active");
    })
  });
});

$(".scheme-seat").click(function() {
  var counter = document.querySelectorAll(".active"),
    countSeats = counter.length;
  setTimeout(function() {
    $('.counter-text').append(counter.length);
  }, 1000);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="counter-text">Забронировано мест:</span>
<div>
  <div class="scheme-seat">1</div>
  <div class="scheme-seat">2</div>
  <div class="scheme-seat">3</div>
  <div class="scheme-seat">4</div>
</div>


Ответы (0 шт):