Как обновить статус контрольного списка с помощью вызова ajax

Question

Я пытаюсь обновить статус контрольного списка одним нажатием кнопки.Могу ли я добиться этого, совершая отдельные вызовы ajax, относящиеся к элементу контрольного списка, или я могу сделать это, сделав один вызов, и все же обновить его, как только он будет завершен.

Я приложил шаблон того, как он выглядит ичто я пытаюсь достичь.

Извините, я пытался загрузить файлы изображений CSS, но не смог этого сделать.

Вот так это выглядит

Заранее спасибо.

div {
  width: 30%;
  top: 50%;
  left: 50%;
  border: 1px solid black;
}

ul {
  list-style: none;
  width: 30%;
}

li {
  padding-top: 20px;
}

img {
  float: right;
  display: inline;
  text-align: middle;
  transition: all .2s ease;
}

.pass {
  background: url('status1.png') no-repeat -2px -47px;
  width: 20px;
  height: 20px;
}

.fail {
  background: url('status1.png') no-repeat -2px -70px;
  width: 20px;
  height: 20px;
}

.inprog {
  background: url('status1.png') no-repeat -2px -25px;
  width: 20px;
  height: 20px;
}

.pend {
  background: url('status1.png') no-repeat -2px -3px;
  width: 20px;
  height: 20px;
}

<div>
  <h4> Please Wait...... Performing checks on</h4>
  <ul>
    <li> check1 <img src="img_trans.gif" class="pass" /></li>
    <li> check2 <img src="img_trans.gif" class="fail" /></li>
    <li> check3 <img src="img_trans.gif" class="inprog" /></li>
    <li> check4 <img src="img_trans.gif" class="pend" /></li>
  </ul>
</div>

`

Answer 1

Вы можете сделать это двумя способами

1) Сделать вызов ajax, подготовить содержимое и добавить

2) Снова выполнить вызов ajax и на основе ответа динамически назначить классы вашего

(pass, fail, inprog, pend)