selectric.js nesting bug

by Leonardo Santos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.selectric/1.10.1/jquery.selectric.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.selectric/1.10.1/selectric.css">
<script src="https://cdn.jsdelivr.net/knockout/3.4.0/knockout.js"></script>
<div class="manage-account">
  <div class="form-section" data-bind="foreach: { data: addresses, as: 'address' }">
    <div class="form-group">
      <fieldset>

        <div class="custom-dropdown">
          <select data-bind="options: $root.countries, value: ddSelectedCountry, optionsText: 'displayValue', optionsCaption: 'Select Country', attr: { id: 'ma_dd_country' + $index(), name: 'ma_dd_country' + $index() }">
            <option value="">Dummy item</option>
          </select>
        </div>

      </fieldset>
    </div>
  </div>
</div>

SCSS

// selectric dropdown
.custom-dropdown {
  height: 40px;
  .selectric-wrapper.selectric-custom-dropdown {
    height: 40px;
    .selectric {
      height: 40px;
      border-radius: 10px;
      background-color: white;
      border-color: #555;
      padding: 2px 0;
      .label {
        padding-left: 10px;
        color: blue;
        font-size: 20px;
      }
      .button {
        right: 9px;
        top: 0;
        &:after {
          border: none;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          content: "\f107";
          height: auto;
          width: auto;
          font-size: 38px;
          color: red;
          line-height: 1.1;
        }
      }
      p {
        padding-top: 1px;
        height: 40px;
      }
    }
  }
  .selectric-items {
    li {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
  }
  &.icon {
    .selectric-wrapper.selectric-custom-dropdown {
      .selectric {
        .label {
          padding-left: 40px;
          background-repeat: no-repeat;
          background-position: 0;
        }
      }
    }
  }
}

JavaScript

// selectric init first
//var $select = $('select').selectric().data('selectric');
$('select').selectric();




// mock data
var addresses = [{
  "AddressType": "Home/Residential",
  "Country": "US",
}, {
  "AddressType": "Commercial",
  "Country": "CA",
}]

var countries = [{
    "CountryCode": "US",
    "DisplayValue": "United States",
    "States": [{
      "StateAbbr": "AL",
      "DisplayValue": "Alabama"
    }, {
      "StateAbbr": "AK",
      "DisplayValue": "Alaska"
    }, {
      "StateAbbr": "AZ",
      "DisplayValue": "Arizona"
    }, {
      "StateAbbr": "AR",
      "DisplayValue": "Arkansas"
    }, {
      "StateAbbr": "CA",
      "DisplayValue": "California"
    }, {
      "StateAbbr": "CO",
      "DisplayValue": "Colorado"
    }, {
      "StateAbbr": "CT",
      "DisplayValue": "Connecticut"
    }, {
      "StateAbbr": "DE",
      "DisplayValue": "Delaware"
    }, {
      "StateAbbr": "DC",
      "DisplayValue": "District of Columbia"
    }, {
      "StateAbbr": "FL",
      "DisplayValue": "Florida"
    }, {
      "StateAbbr": "GA",
      "DisplayValue": "Georgia"
    }, {
      "StateAbbr": "HI",
      "DisplayValue": "Hawaii"
    }, {
      "StateAbbr": "ID",
      "DisplayValue": "Idaho"
    }, {
      "StateAbbr": "IL",
      "DisplayValue": "Illinois"
    }, {
      "StateAbbr": "IN",
      "DisplayValue": "Indiana"
    }, {
      "StateAbbr": "IA",
      "DisplayValue": "Iowa"
    }, {
      "StateAbbr": "KS",
      "DisplayValue": "Kansas"
    }, {
      "StateAbbr": "KY",
      "DisplayValue": "Kentucky"
    }, {
      "StateAbbr": "LA",
      "DisplayValue": "Louisana"
    }, {
      "StateAbbr": "ME",
      "DisplayValue": "Maine"
    }, {
      "StateAbbr": "MD",
      "DisplayValue": "Maryland"
    }, {
      "StateAbbr": "MA",
      "DisplayValue": "Massachusetts"
    }, {
      "StateAbbr": "MI",
      "DisplayValue": "Michigan"
    }, {
      "StateAbbr": "MN",
      "DisplayValue": "Minnesota"
    }, {
      "StateAbbr": "MS",
     ...