append function to group JSON list alphanumeric

[orionseye]

What's the proper way to append a function which groups (large) data alphanumeric, on each scroll? I tired with .append() but had no luck

Output would be something like: A aaa B bbb ..etc

Current setup

<div id="scrollArea" class="clusterize-scroll">
<ul id="contentArea" class="clusterize-content">

... and do something like:

$('#contentArea > li').each(function () {
  var letter = $('a', this).text().charAt(0);
  
  if (!$(this).parent().find('[data-letter="'+ letter +'"]').length) {
    $(this).parent().append('<div data-letter="'+ letter+'"><span><b>'+ letter +'</b></span></div>');
  }
  $(this).parent().find('[data-letter="'+ letter +'"]').append(this);
});