Скрытая кнопка появляется после перезагрузки

Question

У меня есть страница, которая отображает набор данных, таких как имя студента, факультет и статус студента, класс студента и кнопка «нет вакансий». Если для данного класса нет вакансий, и если я нажму кнопку «Нет вакансий» на странице, электронная почта будет go, и статус студента изменится. Это рабочий процесс, который у меня есть для моего приложения.

Моя проблема здесь, как только я нажимаю кнопку «нет вакансий», она должна быть удалена со страницы. Я попробовал это, и это тоже работает. Однако, когда я перезагружаю страницу, кнопка «нет вакансий» возвращается на страницу. Я хочу полностью удалить кнопку со страницы после отправки электронного письма.

Может ли кто-нибудь из вас помочь мне в этом?

function noOpening() {
  var candidateName = "Hello"
  var candidateclass = "BE"

  $.ajax({
    type: 'POST',
    url: "/noopening/email",
    data: {
      'candidatename': candidateName,
      'candidateclass': candidateclass,
    },
    success: function(result) {
      if (result.error == "Success") {
        alert("sent");
      } else {
        alert("cannot be sent");
      }
    }
  })
  document.getElementById('loader').style.visibility = 'hidden';
}

<div class="col-md-4 form-display">
  <label class="col-md-8" for="Candidate Name:">Candidate Name:</label>
  <label class="col-md-8" for="candidateName">{{candidate_name}}</label>

</div>
<div class="col-md-4 form-display">
  <label class="col-md-8" for="Candidate class:">Candidate class:</label>
  <label class="col-md-8" for="candidateclass">{{candidate_class}}</label>

</div>
<div class="col-md-4 form-display">
  <label class="col-md-8" for="Candidate status:">Candidate status:</label>
  <label class="col-md-8" for="candidatestatus">{{candidate_status}}</label>

</div>
<div id="loader" visibility="visible">
  <input type="button" id="hideButton" onclick="noOpening()" value="No opening">
</div>