关于php jquery中Active和Deactive更改颜色的问题

Question

I want to change color of (i) tag when I click for active and Deactive.

this cole is running successfully but when i click any (a) tag change first (a) tag color also.

my css

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

My ajax code

$('.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>";
}
}

This code is running successfully but when i click any (a) tag change color on first (a) tag also. i want to change color only this (a) tag on click on which (a) tag. please help

Answer 1

I think you need to add class in anchor tag instead of i like below:-

Jquery:-

$(this).find('a').addClass(addCls).removeClass(removeCls);

PHP:-

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