title: addClass doesnt render until next click
body: <p>Using jquery when i addClass in my code, i see that the class is added to the element but the element doesnt seem to render with the new class until the next click. ? Why </p>
  
  <p>I have tried offsetHeight and i have tried setTimeout to apply the addClass after 1 second but they still dont render until the next click.
  I have tried clicking a dummy button, but still doesnt render until user manually clicks anything on the page.</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>function SetStatus(button) {
    if ($('#' + button.id).prop('value') == 'ALL') {
      $('.optionsbtn').removeClass('btn-bordered');
      $('.optionsbtnall').removeClass('btn-bordered');
      $('#tblData').DataTable().ajax.reload();
      return false;
    } else {
      setTimeout(function() {
        $('.optionsbtn').addClass('btn-bordered');
        $('.optionsbtnall').addClass('btn-bordered');
      }, 500)
      return false;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div style="margin-bottom: -30px; margin-left: 10px;"&gt;
    &lt;input type="hidden" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$ServiceFiltersHF" id="ServiceFiltersHF" value="ALL"&gt;
    &lt;button id="DoNothing" onclick="return false;" style="display: none;"&gt;&lt;/button&gt;
    &lt;input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$ALLbtn" value="ALL" onclick="return SetStatus(this);" id="ALLbtn" class=" btn btn-inverse btn-xs optionsbtn optionsbtnall" title="All"&gt;
    &lt;input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$Pendingbtn" value="Requested" onclick="return SetStatus(this);" id="Pendingbtn" class="btn-primary btn btn-xs  optionsbtn" title=" Requested"&gt;
    &lt;input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$Plannedbtn" value="Planned" onclick="return SetStatus(this);" id="Plannedbtn" class="  btn-info btn btn-xs  optionsbtn" title="Planned"&gt;
    &lt;input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$Completedbtn" value="Completed" onclick="return SetStatus(this);" id="Completedbtn" class=" btn-purple btn btn-xs  optionsbtn" title="Completed"&gt;
    &lt;input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$ReportedBtn" value="Reported" onclick="return SetStatus(this);" id="ReportedBtn" class=" btn-success btn btn-xs  optionsbtn" title="Reported"&gt;
    &lt;input type="submit" name="ctl00$ctl00$ctl00$MainCPHm$MainCPH$MainCPH$CancelledBtn" value="Cancelled" onclick="return SetStatus(this);" id="CancelledBtn" class=" btn btn-danger btn-xs  optionsbtn" title="Cancelled"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the function above, i would expect after 1 second the element to have the btn-bordered class (which it does when i inspect the element) but it does not render until the next click ?</p>
  
  <p>I should say that when i inspect the button on the page it does indeed have the class 'btn-bordered' but the button does not reflect the style until a click occurs on the page, given the class of the button changes, the code seems sound, but could something else be preventing the browser rendering the class until the next click ?</p>