Display of doctors by category, ajax Apologies in advance for my english... 
We have a list of categories and a list of doctors, you need to output as follows: 

category1

item1
item2
item3


category2

item1
item2
item3



Here is what I was able to write:
function renderChatList() {
    let xhttp = new XMLHttpRequest();
    let categoriesArr = [];

    xhttp.onreadystatechange = function () {
      if (this.readyState == 4 &amp;&amp; this.status == 200) {
        categoriesArr = JSON.parse(this.responseText);

        categoriesArr.forEach((category) =&gt; {
          getDoctorsGroup(category.id, category.title);
        });
      }
    };
    xhttp.open(
      &quot;POST&quot;,
      &quot;http://localhost/domen/api/readCategories.php&quot;,
      true
    );
    xhttp.send();
  }
  renderChatList();

  function getDoctorsGroup(id, title) {
    let xhttp = new XMLHttpRequest();
    let doctorsArr = [];

    xhttp.onreadystatechange = function () {
      if (this.readyState == 4 &amp;&amp; this.status == 200) {
        doctorsArr = JSON.parse(this.responseText);
        let html = &quot;&quot;;
        
        html += '&lt;div class=&quot;members-group&quot;&gt;';
        html += '&lt;h4 class=&quot;members-group_title&quot;&gt;';
        html += `&lt;span class=&quot;text&quot;&gt;${title}&lt;/span&gt;`;
        html += '&lt;span class=&quot;icon&quot;&gt;&lt;i class=&quot;far fa-ellipsis-h-alt&quot;&gt;&lt;/i&gt;&lt;/span&gt;';
        html += '&lt;/h4&gt;';
        html += '&lt;div class=&quot;members-group_list&quot;&gt;';
        doctorsArr.forEach(doctor =&gt; {
          if(doctor.category == id) {
            html += '&lt;div class=&quot;member&quot;&gt;';
            html += '&lt;div class=&quot;member-image user-image&quot;&gt;';
            html += `&lt;img src=&quot;images/dist/doctors/${doctor.avatar}&quot; alt=&quot;${doctor.name}&quot;&gt;`;
            html += '&lt;/div&gt;';
            html += '&lt;div class=&quot;member-info&quot;&gt;';
            html += `&lt;h3 class=&quot;member-name truncate-text-item&quot;&gt;${doctor.name}&lt;/h3&gt;`;
            html += `&lt;p class=&quot;member-job truncate-text-item&quot;&gt;${doctor.job}&lt;/p&gt;`;
            html += '&lt;/div&gt;';
            html += '&lt;/div&gt;';
          }
        })
        html += '&lt;/div&gt;';
        html += '&lt;/div&gt;';

        // Insert group into list
        const container = document.querySelector(&quot;.chat-list_members&quot;);
        container.insertAdjacentHTML(&quot;beforeend&quot;, html);

      }
    }
    xhttp.open(
      &quot;POST&quot;,
      &quot;http://localhost/domen/api/readDoctors.php&quot;,
      true
    );
    xhttp.send();
  }

is it possible to optimize the code, or improve?
There are few improvements which I will recommend:

Use fetch API instead of XMLHttpRequest. Fetch is supported by almost every major browser and definitely serves as good replacement for XMLHttpRequest.
Utilize template literals properly. I can see template literals getting used properly at some places, but converting multiple strings into one template literal string will avoid cluttering. Also, instead of creating HTML as string, proper DOM elements can also be created using createElement but I am not sure which one is performant. Maybe someone else will give us some input here.
Utilize functional nature of JS to avoid cluttering. A lot of code can be broken even further into smaller logical pieces.
Use id in querySelector at line document.querySelector(&quot;.chat-list_members&quot;). The reason being, you can have multiple HTML elements with same classname. This leads to a possibility of bug or wrong element getting selected. Id is a better choice in these cases.
Do error handling properly. The code seem to be handling cases when api is successful. A good code should also deal with cases when api fails or some error occurs.

Here is how, I will restructure the code:
function renderChatList() {
    fetch('http://localhost/domen/api/readCategories.php', { method: 'POST', })
      .then(response =&gt; response.json())
      .then(data =&gt; {
          data.forEach((category) =&gt; {
            getDoctorsGroup(category.id, category.title);
          });
      })
      .catch(error =&gt; {
        // Error handling here like alert/toast/popup etc
      });
}

renderChatList();

function getMemberHtml(doctorsArr, id){
    let html = &quot;&quot;
    doctorsArr.forEach(doctor =&gt; {
      if(doctor.category == id) {
        html += `&lt;div class=&quot;member&quot;&gt;
          &lt;div class=&quot;member-image user-image&quot;&gt;
            &lt;img src=&quot;images/dist/doctors/${doctor.avatar}&quot; alt=&quot;${doctor.name}&quot; /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;member-info&quot;&gt;
            &lt;h3 class=&quot;member-name truncate-text-item&quot;&gt;${doctor.name}&lt;/h3&gt;
            &lt;p class=&quot;member-job truncate-text-item&quot;&gt;${doctor.job}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;`;
      }
    })
    return html; 
}

function getDoctorsGroup(id, title) {
    fetch('http://localhost/domen/api/readDoctors.php', { method: 'POST', })
      .then(response =&gt; response.json())
      .then(data =&gt; {
        let html = &quot;&quot;;
        html += `&lt;div class=&quot;members-group&quot;&gt;
          &lt;h4 class=&quot;members-group_title&quot;&gt;
            &lt;span class=&quot;text&quot;&gt;${title}&lt;/span&gt;
            &lt;span class=&quot;icon&quot;&gt;&lt;i class=&quot;far fa-ellipsis-h-alt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/h4&gt;
          &lt;div class=&quot;members-group_list&quot;&gt;
            ${getMemberHtml(data, id)}
          &lt;/div&gt;
        &lt;/div&gt;`;
        
      // Insert group into list
      const container = document.querySelector(&quot;#chat-list_members&quot;);
      container.insertAdjacentHTML(&quot;beforeend&quot;, html);
    })
    .catch(error =&gt; {
      // Error handling here like alert/toast/popup etc
    });
}

Hope it helps. Revert for any doubts/clarifications.