title: How can i add multi lines together into different different div / span tag through this text box?
body: <p>How can i add multi lines together into different different span tag through this text box ?</p>
  <p>There is an text box, by using this box i can insert a new div / span class content Right ?
  But every time when i need to add new class i need to write a new line in this text box and need to press send button, Now i want that if i have 10 lines content together with &quot;Enter&quot; button line break</p>
  <p>Like <br>
  My Line 1 is here <br>
  My Line 2 is here <br>
  My Line 3 is here<br>
  My Line 4 is here<br>
  My Line 5 is here<br>
  My Line 6 is here<br>
  My Line 7 is here<br>
  My Line 8 is here<br>
  ... and so on<br></p>
  <p>then i want to paste all 10 lines in this text box together and by pressing send button i want that all lines must be add in different different div / span class not all in one class with &lt; br &gt; tag that is working now.</p>
  <p>so plz help me to improve my code
  Love you Helper and Thanks in Advance</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const sendButton = document.getElementById('send-btn');
  const textArea = document.getElementById('input');
  const innerDiv = document.getElementById('inner');
  var message = textArea.value;
  
  sendButton.addEventListener('click', function () {
      const message = new MessageContainerBuilder().BuildMessage(textArea.value);
      innerDiv.appendChild(message);
      textArea.value = '';
  });
  
  function encodeHtmlEntity(input) {
      var output = input.replace(/[\u00A0-\u9999&lt;&gt;\&amp;]/gim, function (i) {
          return '&amp;#' + i.charCodeAt(0) + ';';
      });
  
      return output;
  }
  
  function MessageContainerBuilder() {
      var createDivElement = function (classTest) {
          var div = document.createElement('div');
  
          var classAttr = document.createAttribute('class');
          classAttr.value = classTest;
          div.setAttributeNode(classAttr);
  
          return div;
      };
  
      var createSpanElement = function (value, classTest) {
          var span = document.createElement('span');
  
          if (classTest) {
              var classAttr = document.createAttribute('class');
              classAttr.value = classTest;
              span.setAttributeNode(classAttr);
          }
  
          span.innerText = encodeHtmlEntity(value);
  
          return span;
      };
  
      this.BuildMessage = function (text) {
          var divContainer = createDivElement('outgoing');
          var messageSpan = createSpanElement(text, 'me');
  
          divContainer.appendChild(messageSpan);
  
          return divContainer;
      };
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="inner"&gt;
      &lt;div class="incoming"&gt;
          &lt;div class="them"&gt;Lorem
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="outgoing"&gt;
          &lt;div class="me"&gt;Lorem ipsum
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;textarea class="input" id="input" placeholder="Message..."&gt;&lt;/textarea&gt;
  &lt;button class="waves-effect waves-light" id="send-btn"&gt;Send&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>so plz help me to improve my code
  Love you Helper and Thanks in Advance</p>