title: insertAdjacentHTML not adding before beforeend
body: <p>So I have been working on the script that when a user clicks the + button it adds a new button before the addnew div.</p>
  
  <p>From my understanding I have followed the right setup to set up a insertAdjacentHTML </p>
  
  <p><a href="https://codepen.io/russellharrower/pen/rzxLRj" rel="nofollow noreferrer">https://codepen.io/russellharrower/pen/rzxLRj</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;!-- on Morph FAB Display --&gt;
  &lt;div id="newpetprofiles" class="fixed-action-btn"&gt;
  
    &lt;!-- beforebegin --&gt;  
    &lt;div id="overlay" class="blue-grey hidden"&gt;  
     &lt;div id="form"&gt;
   DEPENDING ON IF IT IS THE ADD BUTTON OR A IMAGE OF THEIR KID A DIFFENT FORM SHOULD SHOW.
  &lt;/div&gt;
    &lt;/div&gt;
  
  
     &lt;!-- afterbegin --&gt;
    &lt;div class="btn-floating btn-large blue waves-effect waves-light"&gt;
      &lt;img src="https://ipet.xyz/template/images/russellharrower.jpg"/&gt;
    &lt;/div&gt;
     &lt;!-- beforeend --&gt;
    &lt;div id="addnew" name"addnew" class="btn-floating btn-large blue waves-effect waves-light"&gt;
      &lt;i class="material-icons"&gt;
      add
    &lt;/i&gt;
    &lt;/div&gt;
    &lt;!-- afterend --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('div.btn-floating').click(function () {
   //alert(this.id);
   if(this.id === "addnew"){  
  
   dl= document.getElementById("newpetprofiles")
  dl.insertAdjacentHTML('beforeend','&lt;div class="btn-floating btn-large blue waves-effect waves-light"&gt;&lt;img src="https://ipet.xyz/template/images/russellharrower.jpg"/&gt;&lt;/div&gt;');
  
   }
  
    var morphFAB = $('#overlay');
    morphFAB.toggleClass('visible hidden');
    if (morphFAB.hasClass('visible')) {
      $('#form').addClass('animated slideInUp');
    }else {
      $('#form').removeClass('animated slideInUp');
    }
  })
  </code></pre>