<script>
document.addEventListener('DOMContentLoaded', function() {
  const total = document.querySelectorAll('article section').length;
  const span = document.createElement('span');
  span.className = 'total-counter';
  span.textContent = total;
  document.querySelector('article').prepend(span);
});
</script>
<style>
body.sqs-edit-mode article {
  counter-reset: group-counter;
}

body.sqs-edit-mode article section {
  counter-increment: group-counter;
}

body.sqs-edit-mode article section::before {
  content: counter(group-counter) ". ";
  color: #000;
  font-size: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  left: 30px;
}
  .total-counter {
  	display: none !important;
  }
body.sqs-edit-mode .total-counter {
    display: block !important;
    position: fixed;
    top: 300px;
    z-index: 9999;
    left: 100px;
    font-size: 30px;
    color: red;
}
</style>