title: Cannot use insertAdjacentElement properly
body: <p>I wanted to have the message "This input field cannot be blank" appearing after each input text and email field. However, I failed to do so. Only one message was appeared after the last input field (i.e. Card Number) 
  Would you please help me spot out what happened? I tried for 1 hour. 
  Thank you very much.</p>
  
  <pre><code>//javascript file 
  const elementAction = {
  
      createMessage: function(insertedElement, value, elementCollection, position ){
         const newElement= document.createElement(insertedElement);
         newElement.innerHTML= value;
         elementAction.insertAlert(position, elementCollection, newElement);
         },
  
      insertAlert: function(position, elementCollection, insertedElement){
         for(let i=0; i&lt;elementCollection.length; i++){
         elementCollection[i].insertAdjacentElement(position, insertedElement);
         }
      },
      get: function(element){
          const elementCollection = document.querySelectorAll(element);
          return elementCollection;
       }
   };
  
   const inputFieldCollection = elementAction.get("[type='email'], [type='text']");
   elementAction.createMessage('p', 'This input field cannot be blank', inputFieldCollection, 'afterend');
  </code></pre>
  
  <pre><code>//HTML file 
  &lt;label for="name"&gt;Name:&lt;/label&gt;
      &lt;input type="text" id="name" name="user_name"&gt;
      &lt;label for="mail"&gt;Email:&lt;/label&gt;
      &lt;input type="email" id="mail" name="user_email"&gt;
      &lt;label for="cc-num"&gt;Card Number:&lt;/label&gt;
      &lt;input id="cc-num" name="user_cc-num" type="text"&gt;
  </code></pre>