I had the static version of this page working great locally but the CMS my company use spits out horrible code when it's implemented into the CMS. 

Originally I was trying to loops through all divs within a div and build a select box with the results. 

```
<div id="products-list">
  <div id="glasgow">
      <div class="product">
        <!--Content-->
      </div>
  </div>

  <div id="edinburgh">
      <div class="product">
        <!--Content-->
      </div>
  </div>
</div>

```

Using a simple for each loop with first level divs was fine.

```
 $("#products-list > div").each(function() {
        if ($(this).attr("id") != undefined || $(this).attr("id") != null) {
            $('#select-example').append($('<option>', {
                value: $(this).attr("id"),
                text: $(this).attr("id")
            }));
        }
    });

```

However my CMS decides to wrap the divs like this, and there is not much I can do about it. I'm trying to return the IDs "Glasgow" and "Edinbugh".

```
<div id="products-list">
  <div class="w-component-wrapper">
    <div>
      <div class="w-component-content">
        <div id="glasgow">
          <div class="product">
            <!-- Content --> 
          </div> 
        </div>
      </div>
    </div>
  </div>

  <div class="w-component-wrapper">
    <div>
      <div class="w-component-content">
        <div id="edinburgh">
          <div class="product">
            <!-- Content --> 
          </div> 
        </div>
      </div>
    </div>
  </div>
</div>

```

Most likely is something minor and I just need another set of eyes. Cheers in advance!