title: AJAX - Problem with real time CSS styling
body: <p>I have an HTML file which generates a list of DB-entries in a table by using PHP. That list is row-identifyed by using JS-DOM and making a XMLHttpRequest to my PHP backend. 
  There I decide which color would be as response. When it was responded the color is set by </p>
  
  <pre><code>if (this.readyState === 4 &amp;&amp; this.status === 200) {                                         
      document.getElementById("artikel' . $row['id'] . '").style.color = this.responseText;                                                    
  }
  </code></pre>
  
  <h2>The problem is:</h2>
  
  <p>The color is only set/changed correctly when</p>
  
  <p>1) I am refreshing the page -> cause of a new DB entry in the PHP-Backend at AJAX</p>
  
  <p>2) I make at least 2 klicks on it</p>
  
  <p>What's the problem?</p>
  
  <h2>This is the code that generates the entries</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  foreach ($dataOfDBselect as $row) {
  
  $color = "";
  if ($row['status'] == "false") {
      $color = "#130f40";
  } else {
      $color = "#badc58";
  }
  
  echo '&lt;tbody class="table-text-small" id="artikel' . $row['id'] . '" style="color: ' . $color . ';"&gt;
  &lt;th class="text-table table-inner-big"&gt;' . $row['name'] . '&lt;/th&gt;
  &lt;th class="table-inner-big text-table"&gt;' . $row['amount'] . '&lt;/th&gt;
  
  &lt;th class="table-inner-big text-table"&gt;&lt;i class="far fa-check-square" id="checkArtikel_' . $row['id'] . '"&gt;&lt;/i&gt;&lt;/th&gt;
  &lt;/tbody&gt;
  &lt;script&gt;
      document.getElementById("artikel' . $row['id'] . '").addEventListener("click", function () {
          let request = new XMLHttpRequest();
          request.open("GET", "./core/handler_ArtikelChecked.php?f_identify=' . $row['id'] . '");
  
          request.onreadystatechange = function () {
              if (this.readyState === 4 &amp;&amp; this.status === 200) {
                  document.getElementById("artikel' . $row['id'] . '").style.color = this.responseText;                                                    
              }
          };
          request.send();
  
      });
  &lt;/script&gt;';
  }
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and this is what my PHP-Backend returns correctly to my site </p>
  
  <p><code>echo $toColor;</code> which is somethin like <code>$toColor = "#badc58";</code></p>