title: Angular Directive creating duplicate elements
body: <p>I have an Angular directive that is working for the most part, but it is creating duplicate injections of button and ul class="dropdown" after my element. Can anyone see why this would duplicate? Works fine in plain js.</p>
  
  <p>My Directive:</p>
  
  <pre><code> import { Directive, ElementRef, Renderer2, HostListener, OnInit } from '@angular/core';
  
  @Directive({
    selector: '.dropdown-container'
  })
  export class DropdownDirective implements OnInit {
  
    constructor(private el: ElementRef, private _renderer: Renderer2) {
  
    }
  
    ngOnInit(){
  
      var dropdown = document.querySelectorAll('.customization-option');
      // /////// Adding li's for each option ////////
      for (var i = 0; i &lt; dropdown.length; i++) {
        var option = dropdown[i].querySelectorAll('option');
        var options = [];
        var drop;
        for (var x = 0; x &lt; option.length; x++) {
          options.push(option[x].innerHTML);
        }
  
        drop = "&lt;button&gt;" + options[0] + "&lt;/button&gt;&lt;ul class='dropdown'&gt;";
        options.forEach(addOptions);
        drop += "&lt;/ul&gt;";
        console.log(drop);
        dropdown[i].insertAdjacentHTML('afterend', drop)
      }
  
      function addOptions(value) {
        drop += "&lt;li&gt;" + value + "&lt;/li&gt;";
      }
  
  
    }
  
    @HostListener('click') onClick(e) {
  
      var thisDrop = this.el.nativeElement;
      var opt = thisDrop.querySelector('.dropdown').children;
      var buttonDrop = thisDrop.parentElement.parentElement.querySelector('button');
      thisDrop.classList.toggle("active");
  
  
      for (var i = 0; i &lt; opt.length; i++) {
        opt[i].addEventListener('click', function () {
          var optValue = this.innerHTML;
          buttonDrop.innerHTML = optValue;
          this.parentElement.classList.remove('active');
        });
      }
  
    }
  
  }
  </code></pre>
  
  <p>In my template:</p>
  
  <pre><code>&lt;form [formGroup]="storeRequest"&gt;
    &lt;div class="container"&gt;
      &lt;h4&gt;What can we do for you?&lt;/h4&gt;
  
      &lt;div class="col-2-container"&gt;
        &lt;div class="fieldset"&gt;
          &lt;div class="dropdown-container" appDrop&gt;
            &lt;label for="topic"&gt;Choose a Topic*&lt;/label&gt;
            &lt;select name="topic" id="topic" class="customization-option" (change)="toggleForm($event)"&gt;
              &lt;option value="Become a Sponsor" selected&gt;Become a Sponsor&lt;/option&gt;
              &lt;option value="Host a Fundraising Event"&gt;Host a Fundraising Event&lt;/option&gt;
              &lt;option value="Give a Donation"&gt;Give a Donation&lt;/option&gt;
              &lt;option value="General Information"&gt;General Information&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="col-2-container"&gt;
        &lt;div class="fieldset"&gt;
          &lt;label for="stCompany" appFocus&gt;Company&lt;/label&gt;
          &lt;input type="text" name="company" id="stCompany" autocomplete="on" appFocus /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-2-container"&gt;
        &lt;div class="fieldset"&gt;
          &lt;label for="stFirstname" appFocus&gt;First Name*&lt;/label&gt;
          &lt;input type="text" name="firstname2" id="stFirstname" autocomplete="on" appFocus formControlName="stFirstname" /&gt;
          &lt;span *ngIf="!storeRequest.get('stFirstname').valid &amp;&amp; storeRequest.get('stFirstname').touched" class="validation-error"&gt;Please enter your first name.&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="fieldset"&gt;
          &lt;label for="stLastname" appFocus&gt;Last Name*&lt;/label&gt;
          &lt;input type="text" name="stLastname" id="stLastname" autocomplete="on" appFocus formControlName="stLastname" /&gt;
          &lt;span *ngIf="!storeRequest.get('stLastname').valid &amp;&amp; storeRequest.get('stLastname').touched" class="validation-error"&gt;Please enter your last name.&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-2-container"&gt;
        &lt;div class="fieldset"&gt;
          &lt;label for="stAddress1" appFocus&gt;Address Line 1*&lt;/label&gt;
          &lt;input type="text" name="stAddress1" id="stAddress1" autocomplete="on" appFocus formControlName="stAddress1" /&gt;
          &lt;span *ngIf="!storeRequest.get('stAddress1').valid &amp;&amp; storeRequest.get('stAddress1').touched" class="validation-error"&gt;Please enter your address.&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="fieldset"&gt;
          &lt;label for="stAddress2" appFocus&gt;Address Line 2&lt;/label&gt;
          &lt;input type="text" name="stAddress2" id="stAddress2" autocomplete="on" appFocus formControlName="stAddress2" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-2-container"&gt;
        &lt;div class="fieldset city"&gt;
          &lt;label for="stCity" appFocus&gt;City*&lt;/label&gt;
          &lt;input type="text" name="stCity" id="stCity" autocomplete="on" appFocus formControlName="stCity" /&gt;
  
        &lt;/div&gt;
  
  
  
          &lt;div class="fieldset zip"&gt;
  
            &lt;label for="stZip" appFocus&gt;Zip Code*&lt;/label&gt;
            &lt;input type="text" name="stZip" id="stZip" autocomplete="on" appFocus formControlName="stZip" /&gt;
            &lt;span *ngIf="!storeRequest.get('stZip').valid &amp;&amp; storeRequest.get('stZip').touched" class="validation-error"&gt;Please enter your zip code.&lt;/span&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;&lt;!--Col-2 end--&gt;
  
      &lt;div class="col-2-container"&gt;
        &lt;div class="fieldset"&gt;
          &lt;label for="stEmail" appFocus&gt;Email*&lt;/label&gt;
          &lt;input type="email" name="stEmail" id="stEmail" autocomplete="on" appFocus formControlName="stEmail" /&gt;
          &lt;span *ngIf="!storeRequest.get('stEmail').valid &amp;&amp; storeRequest.get('stEmail').touched" class="validation-error"&gt;Please enter your valid email.&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="fieldset"&gt;
          &lt;label for="stPhone" appFocus&gt;Phone Number*&lt;/label&gt;
          &lt;input type="tel" name="stPhone" id="stPhone" autocomplete="on" appFocus formControlName="stPhone" /&gt;
          &lt;span *ngIf="!storeRequest.get('stPhone').valid &amp;&amp; storeRequest.get('stPhone').touched" class="validation-error"&gt;Please enter your valid phone.&lt;/span&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;h4&gt;Best time to contact you?*&lt;/h4&gt;
  
      &lt;div class="col-2-container"&gt;
        &lt;div class="fieldset"&gt;
          &lt;div class="dropdown-container" appDrop&gt;
            &lt;label for="bestTime"&gt;Select a Time*&lt;/label&gt;
            &lt;select name="bestTime" id="bestTime" class="customization-option"&gt;
              &lt;option value="Morning" selected&gt;Morning&lt;/option&gt;
              &lt;option value="Afternoon"&gt;Afternoon&lt;/option&gt;
              &lt;option value="Evening"&gt;Evening&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;h4 *ngIf="!general"&gt;Does the organization have a 501 (c)3 Status?&lt;/h4&gt;
      &lt;div *ngIf="!general" class="col-2-container"&gt;
        &lt;div class="radios-container"&gt;
          &lt;div class="radio-round"&gt;
            &lt;input type="radio" checked class="radio" name="c3" id="yes501" /&gt;
            &lt;label for="yes501"&gt;Yes&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="radio-round"&gt;
            &lt;input type="radio" class="radio" name="c3" id="no501" /&gt;
            &lt;label for="no501"&gt;No&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  
  
      &lt;h4&gt;What makes your organization a great fit for Zaxby's?&lt;/h4&gt;
  
      &lt;div class=""&gt;
        &lt;textarea rows="8"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
      &lt;br /&gt;
      &lt;div class="required"&gt;*Required&lt;/div&gt;
      &lt;div class="button-container"&gt;
        &lt;button class="button gray"&gt;Cancel&lt;/button&gt;
        &lt;button class="button red"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>It works for the most part, but I get 2 buttons and 2 ul's created after each dropdown. Any suggestions? Thanks in advance!</p>