<div class="container">
  <div class="row mt-2">
    <div class="col-12">
      <div class="card shadow">
        <div class="card-body">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>UID</th>
                <th>STATUS</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th class="row-id">jt4navgbTwPi</th>
                <td class="row-status">unknown</td>
                <td class="text-center">
                  <button type="button" class="btn btn-primary btn-sm update-btn">update</button>
                </td>
              </tr>
              <tr>
                <th class="row-id">K6xIEAO0BbdA</th>
                <td class="row-status">unknown</td>
                <td class="text-center">
                  <button type="button" class="btn btn-primary btn-sm update-btn">update</button>
                </td>
              </tr>
              <tr>
                <th class="row-id">4RZ57KmwwT9d</th>
                <td class="row-status">unknown</td>
                <td class="text-center">
                  <button type="button" class="btn btn-primary btn-sm update-btn">update</button>
                </td>
              </tr>
              <tr>
                <th class="row-id">7iK7VUjkEzP1</th>
                <td class="row-status">unknown</td>
                <td class="text-center">
                  <button type="button" class="btn btn-primary btn-sm update-btn">update</button>
                </td>
              </tr>
            </tbody>
          </table>
          <p>* <small>Second row is hard coded to be offline</small></p>
        </div>
      </div>
    </div>
  </div>
</div>
$(".update-btn").on("click", function () {
  let btn = $(this); //The button that was clicked
  let id = btn.closest("tr").find(".row-id").text(); //The rows id
  let status_text = btn.closest("tr").find(".row-status"); //The rows status text

  let status_code;
  if (id === "K6xIEAO0BbdA") {
    status_code = 400;
  } else {
    status_code = 200;
  }

  btn.html(
    '<span class="spinner-border spinner-border-sm" role="status"></span>'
  ); //Add spinner to button

  status_text.removeClass("text-success text-danger"); //Remove status text colors
  status_text.text("......"); //Make status text ......

  $.ajax({
    url: "https://api.srv3r.com/status/index.php",
    data: { status: status_code, id: id },
    type: "GET",
    complete: function (xhr) {
      if (xhr.status === 200) {
        status_text.text("ONLINE"); //Make status text ONLINE
        status_text.addClass("text-success"); //Green color class for text
      } else {
        status_text.text("OFFLINE"); //Make status text OFFLINE
        status_text.addClass("text-danger"); //Red color class for text
      }

      btn.find("span").remove(); //Remove spinner from button
      btn.text("update"); //Re add update text to button
    }
  });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js