Count DIVs with a dynamic class inside of other DIVs with a dynamic class

Question

I have this horrendous code, it works, but... I am sure you are all gagging at the site of it. What can be done to dynamically place the resortcode into those classes to clean this code up?

What I am trying to achieve is to add the result count in the resortheader for available rooms under each resort. This works, I just know there has to be a better way, but I am not sure how to achieve that.

The code in question is the second set.

Initial code that creates my room DIVs:

let searchresult = function(response) {

    let resortCodes = new Set();
    for (let j = 0; j < response.length; j++) {

        resortCodes.add(response[j].resortcode); // add only happens if the resortcode isn't already in resortCodes
        let divID = 'results-' + response[j].resortcode;
        let container = document.getElementById(divID);
        let price = response[j].points.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

              if (response[j].available < 1) {
                var available = 'soldoutresult';
                var resultClass = response[j].resortcode + 'soldout';
                var btn = '<button type="button" class="soldout">SOLD OUT</button>';
              }
              else {
                var available = 'availableresult';
                var resultClass = response[j].resortcode + 'roomavail';
                var btn = '<button type="button" class="booknow">BOOK NOW</button>';
              }


        container.innerHTML += `
            <div class="${available} roomresults ${resultClass}">

            <div class="roomthumb" style="background-image:url(${response[j].roomimgthumb});">
            <center><button class="myBtn roomdetailsbtn" data-target="#modal${response[j].roomcode}" data-toggle="modal">Room Details</button></center>
            </div>
            `
          }
        };

To Count My DIVs.

let countResults = function(response){
  var countAKV = $('div.AKVroomavail').length;
  var countAKV2 = $('div.AKV2roomavail').length;
  var countAULV = $('div.AULVroomavail').length;
  var countBLT = $('div.BLTroomavail').length;
  
  if(countAKV == 0){
    document.getElementById('count-akvjh').innerHTML='Sold Out';
  }
  else {
    document.getElementById('count-akvjh').innerHTML = countAKV + " Results";
  }
  if(countAKV2 == 0){
    document.getElementById('count-akvkv').innerHTML='Sold Out';
  }
  else {
    document.getElementById('count-akvkv').innerHTML = countAKV2 + " Results";
  }
  if(countAULV == 0){
    document.getElementById('count-aul').innerHTML='Sold Out';
  }
  else {
    document.getElementById('count-aul').innerHTML = countAULV + " Results";
  }
  if(countBLT == 0){
    document.getElementById('count-blt').innerHTML='Sold Out';
  }
}

The HTML:

<div id="akvjhcontainer" class="resortcontainer">
        <div id="akvjhheader" class="resortheader">
            <div class="headertext"><p class="resortnametext">Animal Kingdom Villas - Jambo House</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
            <div class="collapseBTN"><span id="count-akvjh"class="rescount"></span><button class="collstyle" data-toggle="collapse" data-target="#results-AKV"><i></i></button></div>
        </div>
        <div id="results-AKV" class="results-AKV collapse show"></div>
    </div>

    <div id="akvkvcontainer" class="resortcontainer">
        <div id="akvkvheader" class="resortheader">
            <div class="headertext"><p class="resortnametext">Animal Kingdom Villas - Kidani Village</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
            <div class="collapseBTN"><span id="count-akvkv"class="rescount"></span><button class="collstyle" data-toggle="collapse" data-target="#results-AKV2"><i></i></button></div>
        </div>
        <div id="results-AKV2" class="results-AKV2 collapse show"></div>
    </div>

    <div id="aulcontainer" class="resortcontainer">
        <div id="aulheader" class="resortheader">
            <div class="headertext"><p class="resortnametext">Aulani</p><p class="locationtext">Kapolei, Hawaii</p></div>
            <div class="collapseBTN"><span id="count-aul"class="rescount"></span><button class="collstyle" data-toggle="collapse" data-target="#results-AULV"><i></i></button></div>
        </div>
        <div id="results-AULV" class="results-AULV collapse show"></div>
    </div>

    <div id="bltcontainer" class="resortcontainer">
        <div id="bltheader" class="resortheader">
            <div class="headertext"><p class="resortnametext">Bay Lake Tower</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
            <div class="collapseBTN"><span id="count-blt"class="rescount"></span><button class="collstyle" data-toggle="collapse" data-target="#results-BLT"><i></i></button></div>
        </div>
        <div id="results-BLT" class="results-BLT collapse show"></div>
    </div>

Any help is appreciated.

Answer 1

I figured it out. I came across this fiddle: http://jsfiddle.net/dv5gtfcw/ That was submitted as the answer here: counting divs inside div

HTML"

<div id="akvjhcontainer" class="resortcontainer">
        <div id="akvjhheader" class="resortheader">
            <div class="headertext"><p class="resortnametext">Animal Kingdom Villas - Jambo House</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
            <div class="collapseBTN"><span class="countDiv0"></span><button class="collstyle" data-toggle="collapse" data-target="#results-AKV"><i></i></button></div>
        </div>
        <div id="results-AKV" class="results-AKV collapse show resultcontainer"></div>
    </div>

    <div id="akvkvcontainer" class="resortcontainer">
        <div id="akvkvheader" class="resortheader">
            <div class="headertext"><p class="resortnametext">Animal Kingdom Villas - Kidani Village</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
            <div class="collapseBTN"><span class="countDiv1"></span><button class="collstyle" data-toggle="collapse" data-target="#results-AKV2"><i></i></button></div>
        </div>
        <div id="results-AKV2" class="results-AKV2 collapse show resultcontainer"></div>
    </div>

$('.resultcontainer').each(function(i) { 
            var n = $(this).children('.roomavailable').length;
            $(".countDiv"+i).text(n + " Results");
            console.log(n);
        });

let searchresult = function(response) {

    let resortCodes = new Set();
    for (let j = 0; j < response.length; j++) {

        resortCodes.add(response[j].resortcode); // add only happens if the resortcode isn't already in resortCodes
        let divID = 'results-' + response[j].resortcode;
        let container = document.getElementById(divID);
        let price = response[j].points.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

              if (response[j].available < 1) {
                var available = 'soldoutresult';
                var status = 'soldout';
                var btn = '<button type="button" class="soldout">SOLD OUT</button>';
              }
              else {
                var available = 'availableresult';
                var status = 'available';
                var btn = '<button type="button" class="booknow">BOOK NOW</button>';
              }


        container.innerHTML += `
            <div class="${available} roomresults room${status}">