How can you make a dynamic label for a dropdown box that shows the number of elements inside of it?

Question

This should be incredibly simple, but I'm really struggling to put it together.

Simply put, I have a sidebar on my site that has A - Z categories for a list of YouTube series. Here's what it looks like. You can also view the whole thing here if you need to. It works and looks okay right now, but I want to have a dynamic counter of the number of series in each dropdown. So for instance if there were 15 series in the 'B' category, there would be a little '15' next to the B.

I could just use HTML to make static counters, but the problem arises when you filter out some elements from the dropdown menu. So ultimately I want to have a script that counts the number of elements inside the dropdown and tack on a number next to it, sort of like this.

Here's an excerpt of the HTML for the sidebar.

<li>
    <label>
        A
        <input type="checkbox">
    </label>  
    <ul>
    </ul>
</li>
<li>
    <label>
        B
        <input type="checkbox">
    </label>    
    <ul class="series-list">
        <ol>series...</ol>
        <ol>series...</ol>
        <ol>series...</ol>
        <ol>series...</ol>
        <ol>series...</ol>
    </ul>
</li>

My idea was to create a script that would automatically take in the ul with class = "series-list" (to separate it from the other, unrelated uls) and then count the number of ol elements within it. That count would then be inserted into the label via innerHTML next to the letter.

So far I've come up with a number of scripts that do absolutely nothing. This might be the least terrible one I've made, although it's still pretty terrible.

let dropdowns = document.querySelectorAll('series-list');
var count;

for (let i = 0; i < length.dropdowns; i++) {
    count = dropdowns[i];
    console.log(count);
}

I should note that this script obviously doesn't make any changes since it just console logs the count. I'm just testing it at this point - I'm not even close to actually implementing it.

In my defense, I haven't slept much lately and have spent most of my waking hours coding, so my brain is fried.

Any help is appreciated.

Answer 1

I slightly modifiy your HTML, only to put the input after the label : easier to update the innerhtml

I put back your exact html. And modifiy script

count_series();

function count_series() {
  document.querySelectorAll('.series-list').forEach(el => {
    let elToChange = el.previousElementSibling.firstChild;
    let txt = elToChange.textContent.trim().slice(0, 1);
    txt = txt + ' ' + el.children.length;
    elToChange.textContent = txt;
  });

}

<ul class="lists">
  <li>
    <label>
            A
            <input type="checkbox">
        </label>
    <ul class="series-list">
      <li>series...</li>
      <li>series...</li>
    </ul>
  </li>
  <li>
    <label>
            B
            <input type="checkbox">
        </label>
    <ul class="series-list">
      <li>series...</li>
      <li>series...</li>
      <li>series...</li>
      <li>series...</li>
      <li>series...</li>
    </ul>
  </li>
</ul>