Проблема с активным и деактивным изменением цвета в php jquery

Я хочу изменить цвет тега (i), когда я нажимаю на активный и неактивный.

этот коул работает успешно, но когда я нажимаю любой (а) тег, сначала меняю (а) цвет тега.

мой CSS

.active{color:green;}
.deactive{color:red;}

Мой код ajax

$('.pactive').click(function(){

var pactiveId = $(this).attr('id');
var currentVal = $(this).find('i').attr('title');
var addCls = 'active';
var removeCls = 'deactive';
var title = 'Active';
if (currentVal == 'Active'){
  addCls = 'deactive';
  removeCls = 'active';
  title = 'Deactive';
}

$(this).find('i').addClass(addCls).removeClass(removeCls);
$(this).find('i').attr('title',title);



$.post('controller/ajax-product-active.php?pactiveId='+pactiveId,
{},function(data)
{  
$('#product-active').html(data);


});

});

ajax-product-active.php

$pactiveId = $_GET['pactiveId'];
$checkstatus = mysqli_query($conn,"select * from products where id = '{$pactiveId}'");
 while($prow = mysqli_fetch_array($checkstatus))
 {
 if ($prow['status']=='Active') {

    $update_status = mysqli_query($conn,"update products set status = 'Deactive' where id = '{$pactiveId}'");

    echo "<a id='$prow[id]' class='pactive' style='cursor: pointer;'>
                    <i class='fa fa-circle active' aria-hidden='true' title='Active'></i></a>";


}
elseif ($prow['status']=='Deactive') {

    $update_status = mysqli_query($conn,"update products set status = 'Active' where id = '{$pactiveId}'");

    echo "<a id='$prow[id]' class='pactive' style='cursor: pointer;'>
                    <i class='fa fa-circle deactive' aria-hidden='true' title='Deactive'></i></a>";
}
}

Этот код работает успешно, но когда я нажимаю любой тег (a), меняет цвет и на первом теге (a). Я хочу изменить цвет только этого (а) тега при нажатии на который (а) тег. пожалуйста помоги