title: How to open a chat tab by clicking on contact?
body: <p>I'd love if you could help me out w/ this issue I'm having. I'm trying to create a list of contacts, like the following, and then be able to open a chat tab for that contact. Somehow,it seems like the JS isn´t working, I'd appreciate if you could give me a hand.</p>
  
  <p>1st piece (HTML contact)</p>
  
  <pre><code>&lt;div id="contact-list"&gt;
                  &lt;div class="contact-line"&gt;
                      &lt;div class="status"&gt;&lt;div class="online"&gt;&lt;/div&gt;&lt;/div&gt;
                      &lt;div class="user-photo"&gt;&lt;/div&gt;
                      &lt;div class="unread-wrap"&gt;&lt;div class="unread"&gt;2&lt;/div&gt;&lt;/div&gt;
                      &lt;div class="contact-name"&gt;111111111&lt;/div&gt;
                      &lt;button onclick="createConversation(0)"&gt;Open Chat Tab&lt;/button&gt;
                  &lt;/div&gt;
  
                  ...
  
  &lt;/div&gt;
  
  &lt;ul id="ConversationsHeaderList"&gt;
  &lt;/ul&gt;
  
  &lt;script type="text/javascript" src="---.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>2nd Piece (JS)</p>
  
  <pre><code>var friendsList = document.getElementById("contact-list").getElementsByClass("contact-line").innerHTML;
  var conversations = [];
  
  function createConversation(contactindex) {
  
  var auxvar = '&lt;button&gt;&lt;div class="ConversationHeader"&gt;' + friendsList[contactindex].getElementsByClass("contact-name").innerHTML + '&lt;/div&gt;&lt;/button&gt;' + '&lt;div class="status"&gt;' + friendsList[contactindex].getElementsByClass("status").innerHTML +'&lt;/div&gt;' + '&lt;div class="unread-wrap"&gt;' + friendsList[contactindex].getElementsByClass("unread-wrap").innerHTML + '&lt;/div&gt;';
  
  conversations.push('&lt;li&gt;' + auxvar + '&lt;div class="ConversationClose" title="Close Conversation"&gt;&lt;i class="fa fa-window-close" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;' + '&lt;/li&gt;');
  
  document.getElementById("ConversationsHeaderList").innerHTML = conversations;
  </code></pre>
  
  <p>}</p>
  
  <p>Somehow, I can´t make it create something like this:</p>
  
  <pre><code>&lt;ul id="ConversationsHeaderList"&gt;
      &lt;li class="ConversationsHeader"&gt;
                          &lt;button&gt;&lt;div class="ConversationHeader"&gt;111111111&lt;/div&gt;&lt;/button&gt;
                          &lt;div class="status"&gt;&lt;div class="online"&gt;&lt;/div&gt;&lt;/div&gt;
                          &lt;div class="unread-wrap"&gt;&lt;div class="unread"&gt;2&lt;/div&gt;&lt;/div&gt;
                          &lt;div class="ConversationClose" title="Close Conversation"&gt;&lt;i class="fa fa-window-close" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>