title: XMLHttpRequest PHP Chats
body: <p>I am trying to create a system to display messages on 2 or more separate chats( with different messages stored in a db) on the same page. The chats each have ids to differentiate them and I have created a function to go through each chat in use and print the approprite messages for them but only 1 chat gets the messages.
  The Code:
  The HTML</p>
  
  <pre><code>&lt;div class="full_wrap"&gt;
     &lt;div class="force-overflow"&gt;&lt;/div&gt;
     &lt;div id="Sidenav" class="side"&gt;
  
        &lt;h2&gt;Chat Settings &amp; Info&lt;/h2&gt;
  
        &lt;a id="closebtn" href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
  
        &lt;div class="authr"&gt;
  
           &lt;a&gt;
              &lt;div class="authr_img"&gt;&lt;/div&gt;​
           &lt;/a&gt;
  
           &lt;form action="mypage.php" method="post"&gt;
              &lt;div class="authr_name"&gt;
                 &lt;button value="&lt;?php echo $chat_authr ?&gt;" name="userlink" class="subm_as_text"&gt;&lt;?php echo $chat_authr;  ?&gt;&lt;/button&gt;
              &lt;/div&gt;
           &lt;/form&gt;
        &lt;/div&gt;
  
        &lt;div class="chat_info"&gt;
  
           &lt;div class="chat_descy"&gt;
  
              &lt;h2&gt;Chat Description&lt;/h2&gt;
              &lt;div class="descc"&gt;
                 &lt;h3&gt;&lt;?php echo $chat_description; ?&gt;&lt;/h3&gt;
              &lt;/div&gt;
           &lt;/div&gt;
  
           &lt;div class="chat_fol"&gt;&lt;h2&gt;Chat users: &lt;?php echo $num_users; ?&gt;&lt;/h2&gt;&lt;/div&gt;
  
           &lt;div class="chat_back"&gt;
              &lt;h2&gt; Change Chat Wallpaper&lt;/h2&gt;
  
              &lt;form method="post" action="picture.php" enctype="multipart/form-data"&gt;
                 &lt;input type="file" id="upload" class="custom-file-input" name="chat_wall"&gt;
                 &lt;input type="submit" class="chat_wall_subm" value="Change"/&gt;
              &lt;/form&gt;
           &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;form method="post" action="chat.php" &gt;
           &lt;!--&lt;input type="submit" class="chat_leave" name="" value="Leave Chat"&gt;--&gt;
  
           &lt;button class="chat_leave" name="chat_leave" value="&lt;?php echo $chat_index; ?&gt;" &gt;Leave Chat&lt;/button&gt;
        &lt;/form&gt;
     &lt;/div&gt;
  
  
     &lt;div class="mnav"&gt;
        &lt;span onclick="openNav()"&gt;&amp;#9776;&lt;/span&gt;
        &lt;i class="material-icons" id="chat_un_small" onclick="chat_un_small()"&gt;arrow_upward&lt;/i&gt;
        &lt;h1&gt;&lt;?php echo $chat_title ?&gt;&lt;/h1&gt;
  
     &lt;/div&gt;
  
  
     &lt;!--one ting--&gt;
     &lt;div class="conceal_wrapper"&gt;
        &lt;div class="msgs" id="5e2dbe2be3b5927c588509edb1c46f7d"&gt;
        &lt;/div&gt;
  
        &lt;form method="post" id="form_5e2dbe2be3b5927c588509edb1c46f7d" class="comform"&gt;
           &lt;div class="wcom" &gt;
              &lt;input maxlength="140" type = "text" id="5e2dbe2be3b5927c588509edb1c46f7d"  class="comin" placeholder="My message..." name="sendmsg" autocapitalize="off" autocorrect="off"/&gt;
              &lt;input class="hidden_index" type="text" value="5e2dbe2be3b5927c588509edb1c46f7d" name="chat_index"/&gt;
           &lt;/div&gt;
        &lt;/form&gt;
     &lt;/div&gt;
  
     &lt;div class="chat_enlarge"&gt;
        &lt;div class="chat_enlarge_full" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_full()"&gt;&lt;/div&gt;
        &lt;div class="chat_enlarge_standard"  onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_standard()"&gt;&lt;/div&gt;
        &lt;div class="chat_enlarge_small"  onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_small()"&gt;&lt;/div&gt;
     &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;div class="full_wrap"&gt;
     &lt;div class="force-overflow"&gt;&lt;/div&gt;
     &lt;div id="Sidenav" class="side"&gt;
  
        &lt;h2&gt;Chat Settings &amp; Info&lt;/h2&gt;
  
        &lt;a id="closebtn" href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
  
        &lt;div class="authr"&gt;
  
           &lt;a&gt;
              &lt;div class="authr_img"&gt;&lt;/div&gt;​
           &lt;/a&gt;
  
           &lt;form action="mypage.php" method="post"&gt;
              &lt;div class="authr_name"&gt;
                 &lt;button value="&lt;?php echo $chat_authr ?&gt;" name="userlink" class="subm_as_text"&gt;&lt;?php echo $chat_authr;  ?&gt;&lt;/button&gt;
              &lt;/div&gt;
           &lt;/form&gt;
  
        &lt;/div&gt;
  
  
        &lt;div class="chat_info"&gt;
           &lt;div class="chat_descy"&gt;
              &lt;h2&gt;Chat Description&lt;/h2&gt;
              &lt;div class="descc"&gt;
                 &lt;h3&gt;&lt;?php echo $chat_description; ?&gt;&lt;/h3&gt;
              &lt;/div&gt;
           &lt;/div&gt;
  
           &lt;div class="chat_fol"&gt;&lt;h2&gt;Chat users: &lt;?php echo $num_users; ?&gt;&lt;/h2&gt;&lt;/div&gt;
  
           &lt;div class="chat_back"&gt;
              &lt;h2&gt; Change Chat Wallpaper&lt;/h2&gt;
  
              &lt;form method="post" action="picture.php" enctype="multipart/form-data"&gt;
                 &lt;input type="file" id="upload" class="custom-file-input" name="chat_wall"&gt;
                 &lt;input type="submit" class="chat_wall_subm" value="Change"/&gt;
              &lt;/form&gt;
           &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;form method="post" action="chat.php" &gt;
           &lt;!--&lt;input type="submit" class="chat_leave" name="" value="Leave Chat"&gt;--&gt;
  
           &lt;button class="chat_leave" name="chat_leave" value="&lt;?php echo $chat_index; ?&gt;" &gt;Leave Chat&lt;/button&gt;
        &lt;/form&gt;
     &lt;/div&gt;
  
  
     &lt;div class="mnav"&gt;
        &lt;span onclick="openNav()"&gt;&amp;#9776;&lt;/span&gt;
        &lt;i class="material-icons" id="chat_un_small" onclick="chat_un_small()"&gt;arrow_upward&lt;/i&gt;
        &lt;h1&gt;&lt;?php echo $chat_title ?&gt;&lt;/h1&gt;
  
     &lt;/div&gt;
  
  
     &lt;!--one ting--&gt;
     &lt;div class="conceal_wrapper"&gt;
        &lt;div class="msgs" id="9503e253936e716f18d9c57b4f97d618"&gt;
  
  
        &lt;/div&gt;
  
  
  
        &lt;form method="post" id="form_9503e253936e716f18d9c57b4f97d618" class="comform"&gt;
           &lt;div class="wcom" &gt;
              &lt;input maxlength="140" type = "text" id="9503e253936e716f18d9c57b4f97d618"  class="comin" placeholder="My message..." name="sendmsg" autocapitalize="off" autocorrect="off"/&gt;
              &lt;input class="hidden_index" type="text" value="9503e253936e716f18d9c57b4f97d618" name="chat_index"/&gt;
           &lt;/div&gt;
        &lt;/form&gt;
     &lt;/div&gt;
  
     &lt;div class="chat_enlarge"&gt;
        &lt;div class="chat_enlarge_full" onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_full()"&gt;&lt;/div&gt;
        &lt;div class="chat_enlarge_standard"  onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_standard()"&gt;&lt;/div&gt;
        &lt;div class="chat_enlarge_small"  onmouseover="chat_action(this)" onmouseout="chat_action_negative(this)" onclick="chat_enlarge_small()"&gt;&lt;/div&gt;
     &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>So there are 2 chats separated by the full_wrap class. The msgs have different id for the chat index stored unique for each chat in the db</p>
  
  <p>The Javascript:</p>
  
  <pre><code>$( document ).ready(function() {
    chat_receivemsgs();
  });
  
  
  function chat_receivemsgs(){
    var cusid_ele = document.getElementsByClassName('msgs');
    if(cusid_ele.length == 0) {
      console.log("hi");
    } else {
      for (var i = 0; i &lt; cusid_ele.length; ++i) {
        var item = cusid_ele[i];
        var item_id = item.id;
        console.log(cusid_ele.length);
  
        for (var i = 0; i &lt; cusid_ele.length; ++i) {
          var item = cusid_ele[i];
          var item_id = item.id;
          console.log(item_id);
  
          var xmlhttp = new XMLHttpRequest();
  
          xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 &amp;&amp; this.status == 200) {
              console.log("yes");
              console.log(item_id);
              //  document.getElementById(item_id).innerHTML = this.responseText;
              $("#"+item_id).html(this.responseText);
            }else{
              console.log("no");
              console.log(item_id);
            }
          }
          xmlhttp.open("GET","receivemsg.php?q="+item_id,true);
          xmlhttp.send();
        }
      }
    }
  }
  </code></pre>
  
  <p>receivemsgs.php just selects all messages in the messages table with the index of the index given by item_id. The problem is as stated that only the chat with 9503e253936e716f18d9c57b4f97d618 id receives the messages.</p>
  
  <p>I heard that the requests repeat 4 times but I am not an expert in this field. By using the console, I understood that it ignores the first chat and only generates the messages for 9503e253936e716f18d9c57b4f97d618.</p>
  
  <p>Any help would appreciate.
  Also if there is a better way to control more than one chat on the same page, I wold love to know how to.
  Thank you for your time.</p>