当我在php jquery中使产品处于活动状态并且处于非活动状态时，活动和非活动中的jquery问题会改变颜色

I want to change color of (i) tag when I make product active and Deactive.

this cole is running successfully but when i click on 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>";
 }
 }

In first image all product active

In Second Image when i am Deative any product then first product color change also.

It looks like your ajax-product-active.php script echos out the HTML portion for just the product that has been clicked, is that right?

If so, then you need to look at your HTML document - are you re-using the product-active ID attribute on each product?

$('#product-active').html(data); will change the HTML content of anything with the ID product-active to the HTML passed, so if the HTML for your product page looks like this (for example) then you'd have his problem:

<div id="products">
    <div class="product">
        <p>Product title 1</p>
        <div id="product-active"><i class='fa fa-circle active' aria-hidden='true' title='Active'></i></div>
    </div>

    <div class="product">
        <p>Product title 2</p>
        <div id="product-active"><i class='fa fa-circle active' aria-hidden='true' title='Active'></i></div>
    </div>

    <div class="product">
        <p>Product title 3</p>
        <div id="product-active"><i class='fa fa-circle active' aria-hidden='true' title='Active'></i></div>
    </div>
</div>

If the only difference between an active and an inactive product is the class on the <i> element and the title attribute, then I'd suggest you just don't update the HTML from the JavaScript, so remove the $('#product-active').html(data); line - as you're already changing the <i> and title attribute in the lines of code above it anyway.