title: Selectivity drop down list won't open in generated rows
body: <p>it's my first time using Stack Overflow so apologies for any errors in formatting.</p>
  
  <p>I'm generating rows for creating new objects called hazards in a database and using <a href="https://arendjr.github.io/selectivity/" rel="nofollow noreferrer">Selectivity</a> for the drop down lists. Here's what I have in my view for the drop down list:</p>
  
  <pre><code>@if (Model != null &amp;&amp; Model.Count &gt; 0)
              {
                  int j = 0;
                  foreach (var i in Model)
                  {
                      var hazard = i.hazardID;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;div class="form-groupcol-md-12"&gt;
                                  &lt;label class="control-label col-md-2" for="hazardID"&gt;Hazard&lt;/label&gt;
                                  &lt;div class="col-md-10"&gt;
                                      @Html.DropDownListFor(Model =&gt; Model[j].hazardID, hazardList, htmlAttributes: new { @class = "ddl ddlHazard" })           
                                      @Html.ValidationMessageFor(m =&gt; m[j].hazardID, "", new { @class = "text-danger" })
                                  &lt;/div&gt;
                              &lt;/div&gt;
  </code></pre>
  
  <p>And here is the jquery I'm using to duplicate the last row &amp; change names etc when a button is clicked:</p>
  
  <pre><code>        $('body').on('click', '#addNew', function (e) {
              e.preventDefault();
              var $tableBody = $("#itemTable");
              var $trLast = $tableBody.find("tr:last");
              var $trNew = $trLast.clone();
  
              var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
              $trNew.find("td:last").html('&lt;a href="#" class="remove glyphicon glyphicon-remove"&gt;&lt;/a&gt;');
              $trLast.find("td:last").html('');
              $.each($trNew.find(':input'), function (i, val) {
                  //replace name
                  if (i != 1 &amp;&amp; i!=4)
                  {
                      var oldN = $(this).attr('name');
                      var type = $(this).attr('type');
                      if (type != "file") {
                          var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                          $(this).attr('name', newN);
                      }
  
                      if (type == "text") {
                          if (i != 6)
                              $(this).val("");
                      }
                      else if (type == "file") {
                          $(this).val("");
                      }
  
                      $(this).removeClass("input-validation-error");
                  }
  
              });
  
              $.each($trNew.find('.text-danger'), function (i, val) {
                  var oldD = $(this).attr('data-valmsg-for');
                  var newD = oldD.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                  $(this).attr('data-valmsg-for', newD);
              });
              $trLast.after($trNew);
  
              //reassign validation
              var form = $("form")
                  .removeData("validator")
                  .removeData("unobtrusiveValidation");
              $.validator.unobtrusive.parse(form);
          });
  </code></pre>
  
  <p>Unfortunately when I add a row, it looks normal but when I click the drop down list, nothing happens. If I use a regular drop down list (or submit the form without any generated rows) it works fine, so I'm not sure what I'm doing wrong. Here's the html once a new row is added if it helps:</p>
  
  <p>Original ddl:</p>
  
  <pre><code>&lt;div class="form-groupcol-md-12"&gt;
  &lt;label class="control-label col-md-2" for="hazardID"&gt;Hazard&lt;/label&gt;
  &lt;div class="col-md-10"&gt;
      &lt;select class="ddl ddlHazard" data-val="true" data-val-number="The field Hazard must be a number." data-val-required="You must enter a hazard type" name="[0].hazardID" style="width: 100%; margin-bottom: 6px; display: none;"&gt;
          &lt;option value="3"&gt;Chemical Storage&lt;/option&gt;
          &lt;option value="9"&gt;Eyewash&lt;/option&gt;
          &lt;option value="10"&gt;First Aid Kit&lt;/option&gt;
          &lt;option value="5"&gt;Flamming Storage&lt;/option&gt;
          &lt;option value="2"&gt;Food spill&lt;/option&gt;
          &lt;option value="4"&gt;Frayed Cords&lt;/option&gt;
          &lt;option value="7"&gt;Gaurding&lt;/option&gt;
          &lt;option value="1"&gt;Guard Missing&lt;/option&gt;
          &lt;option value="6"&gt;Housekeeping&lt;/option&gt;
          &lt;option value="11"&gt;Improper Wiring&lt;/option&gt;
          &lt;option value="8"&gt;Pinch Points&lt;/option&gt;
          &lt;option value="12"&gt;Other&lt;/option&gt;
      &lt;/select&gt;
      &lt;div id="s9y_undefined" class="ddl ddlHazard selectivity-input" style="width:100%;margin-bottom:6px" data-name="[0].hazardID" tabindex="0"&gt;
          &lt;div class="selectivity-single-select"&gt;
              &lt;input class="selectivity-single-select-input" type="text"&gt;
              &lt;div class="selectivity-single-result-container"&gt;
                  &lt;span class="selectivity-single-selected-item" data-item-id="3"&gt;
                      &lt;a class="selectivity-single-selected-item-remove"&gt;
                          &lt;i class="fa fa-remove"&gt;&lt;/i&gt;
                      &lt;/a&gt;Chemical Storage
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;i class="fa fa-sort-desc selectivity-caret"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;           
  &lt;span class="field-validation-valid text-danger" data-valmsg-for="[0].hazardID" data-valmsg-replace="true"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Generated ddl:</p>
  
  <pre><code>&lt;div class="form-groupcol-md-12"&gt;   
  &lt;label class="control-label col-md-2" for="hazardID"&gt;Hazard&lt;/label&gt;
  &lt;div class="col-md-10"&gt;
      &lt;select class="ddl ddlHazard" data-val="true" data-val-number="The field Hazard must be a number." data-val-required="You must enter a hazard type" name="[1].hazardID" style="width: 100%; margin-bottom: 6px; display: none;"&gt;
          &lt;option value="3"&gt;Chemical Storage&lt;/option&gt;
          &lt;option value="9"&gt;Eyewash&lt;/option&gt;
          &lt;option value="10"&gt;First Aid Kit&lt;/option&gt;
          &lt;option value="5"&gt;Flamming Storage&lt;/option&gt;
          &lt;option value="2"&gt;Food spill&lt;/option&gt;
          &lt;option value="4"&gt;Frayed Cords&lt;/option&gt;
          &lt;option value="7"&gt;Gaurding&lt;/option&gt;
          &lt;option value="1"&gt;Guard Missing&lt;/option&gt;
          &lt;option value="6"&gt;Housekeeping&lt;/option&gt;
          &lt;option value="11"&gt;Improper Wiring&lt;/option&gt;
          &lt;option value="8"&gt;Pinch Points&lt;/option&gt;
          &lt;option value="12"&gt;Other&lt;/option&gt;
      &lt;/select&gt;
      &lt;div id="s9y_undefined" class="ddl ddlHazard selectivity-input" style="width:100%;margin-bottom:6px" data-name="[0].hazardID" tabindex="0"&gt;
          &lt;div class="selectivity-single-select"&gt;
              &lt;input class="selectivity-single-select-input" type="text"&gt;
                  &lt;div class="selectivity-single-result-container"&gt;
                      &lt;span class="selectivity-single-selected-item" data-item-id="3"&gt;
                          &lt;a class="selectivity-single-selected-item-remove"&gt;
                              &lt;i class="fa fa-remove"&gt;&lt;/i&gt;
                          &lt;/a&gt;Chemical Storage
                      &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;i class="fa fa-sort-desc selectivity-caret"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;           
      &lt;span class="field-validation-valid text-danger" data-valmsg-for="[1].hazardID" data-valmsg-replace="true"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Selectivity is instantiated with .ddl class:</p>
  
  <pre><code>    $(document).ready(function () {
      $(".ddl").each(function () {
          $(this).selectivity({
              allowClear: true
          });
      });
  });
  </code></pre>
  
  <p>If I try to force it to open $(this).selectivity('open') the console tells me it cannot call method on element without Selectivity instance. Any help would be very appreciated!</p>