Я пытаюсь внедрить простой трекер еды для сайта моего ресторана, который обновляет статус еды. Что я хочу сделать, так это то, что всякий раз, когда я обновляю статус еды для заказа, значок становится зеленым для этой стадии. Мне нужно выполнить запрос с моего веб-сайта, получить значение состояния питания и обновить его без ссылки на страницу sh. Как я могу это сделать? Пожалуйста, помогите мне, это очень важно
<div class="progressbar">
<ul >
<li>
<img style="width:130px;height:130px;margin-left:100px"src="foodStatusImages/waiting.png">
<i style="margin-left:150px" class="fa fa-check" id="iconstatus"></i>
<h5 style="margin-left:80px;display: inline-block;white-space: nowrap;">Waiting for
confirmation</h5>
</li>
<li>
<img style="width:130px;height:130px;margin-left:200px;"src="foodStatusImages/confirmed.png">
<i style="margin-left:250px" class="fa fa-check" id="iconstatus"></i>
<h5 style="margin-left:190px;display: inline-block;white-space: nowrap;">Order Confirmed</h5>
</li>
<li>
<img style="width:130px;height:130px;margin-left:350px"src="foodStatusImages/preparing.png">
<i style="margin-left:400px"class="fa fa-check" id="iconstatus"></i>
<h5 style="margin-left:350px;display: inline-block;white-space: nowrap;">In preparation...
</h5>
</li>
<li>
<img style="width:130px;height:130px;margin-left:530px;"src="foodStatusImages/Ready.png">
<i style="margin-left:590px" class="fa fa-check" id="iconstatus"></i>
<h5 style="margin-left:520px;display: inline-block;white-space: nowrap;">Your order is
ready</h5>
</li>-->
<ul>
</div>
<script>
$(document).ready(function()
{
$(function()
{
$("ul li:nth-child(1) i.fa").css("background","#148e14");
var icons = $('#iconstatus'); //does not work
console.log(icons);
$.ajax({
url:"action.php",
data:{icons:icons},
cache:false,
method:"POST",
sucess:function(result)
{
}
});
}
);
});
</script>