I was making a 'like system' - like the twitter system - with PHP and AJAX. In a way that I can't understand, it applies to all buttons on the page when I press only one button. Please help.

enter image description here

index.php

<div id="rezbtn">
    <span id="rezarea">
        <button style="font-size:15px; float:left; <? if($sorus["soru_id"] == $rezs['soru_id'] && $user_id == $rezs['user_id']){ echo 'color:green;';}else{ echo ''; } ?>"  id="rezle" type="button" title="<? echo $sorus["soru_id"]; ?>">
            <span>#Rezle <? echo $rez["rez_id"]; ?></span>
        </button>
    </span>
</div>

ajax.php

if($rezuscount > 0)
    {
        echo "<span style='color:black;'>#Rezle ", $rezcount-1,"</span>";
    }
    else
    {
        echo "<span style='color:green;'>#Rezle ", $rezcount 1,"</span>";
    }

like.js

$('.rezle').click(function(){
    var soruid = $(this).attr("title");
    $.ajax({
        type:"POST",
        url:"ajax.php",
        data:{"soru":soruid},
        success:function(e)
        {
            $('.rezle').html(e);
        }
    })
});

My codes are like this.

CodePudding user response：

Your problem here is that you're referring to all elements with the class rezle and updating them all with the ajax html response:

$('.rezle').html(e);

try this:

$('.rezle').click(function(){
    const rezle_button = this;
    var soruid = $(this).attr("title");
    
    $.ajax({
        type:"POST",
        url:"rezle.php",
        data:{"soru":soruid},
        success:function(e)
        {
            $(rezle_button).html(e);
        }
    })
});