How to change css of current button only while all buttons have same class after ajax success callback with jquery

Question

I show query results in html table and in each row is a button for run update query whit ajax. i need to change button color after click and success ajax callback. when I use:

function myFunction() {
$.ajax({
    url: 'action.php',
    type: 'POST',
    data: 'code='+<?php echo $ab["code"]; ?>+'&action3='+value,
    success: function(result) {
        $(this).css('background-color','#f50519');
    }
   })
}

button color not change. if use class or ID in $().css() it work but change all buttons if use class and if use id the script run on first button. please help me!

I read all related questions in stackoverflow.

I use unique number after all variable and move script before php loop is closed. its work but applies to last row only.

    foreach($result as $ab=>$v) {
        ?>
            <tr>
                <td><?php $no = $ab+1; echo $no; ?></td>
                <td><?php echo $result[$ab]["name"];?></td>
                <td><?php echo $result[$ab]["code"];?></td>
                <td><?php echo $result[$ab]["count(ab.id)"];?></td>
                <form id="form<?php echo $no;?>">
                <td><select name="ac3<?php echo $no;?>" id="action3<?php echo $no;?>">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select></td>
                <td><button id="bt<?php echo $no;?>" class="btn2" onclick="myFunction()">submit</button></input></td>
                </form>
            </tr>
            <script>
function myFunction() {
var e<?php echo $no;?> = document.getElementById("action3<?php echo $no;?>");
var value<?php echo $no;?> = e<?php echo $no;?>.value;
var text<?php echo $no;?> = e<?php echo $no;?>.options[e<?php echo $no;?>.selectedIndex].text;
   
$('#form<?php echo $no;?>').submit(function(e<?php echo $no;?>){
    e<?php echo $no;?>.preventDefault();
    
$.ajax({
    url: 'action.php',
    type: 'POST',
    data: 'code='+<?php echo $result[$ab]["code"]; ?>+'&action3='+value<?php echo $no;?>,
    success: function(result) {
                $('#bt<?php echo $no;?>').css('background-color','#f50519');
                }
    })
})
}
</script>

Answer 1

I solved the problem in this way:

foreach($result as $ab=>$v) {
        ?>
            <tr>
                <td><?php $no = $ab+1; echo $no; ?></td>
                <td><?php echo $result[$ab]["name"];?></td>
                <td><?php echo $result[$ab]["code"];?></td>
                <td><?php echo $result[$ab]["count(ab.id)"];?></td>
                <form id="form<?php echo $no;?>">
                <td><select id="action3<?php echo $no;?>">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select></td>
                <td><button id="bt<?php echo $no;?>" class="btn2" onclick="myFunction<?php echo $no;?>()">submit</button></td>
                </form>
            </tr>
            <script>
function myFunction<?php echo $no;?>() {
var e = document.getElementById("action3<?php echo $no;?>");
var value = e.value;
var text = e.options[e.selectedIndex].text;
  $('#form<?php echo $no;?>').submit(function(e){
    e.preventDefault();
$.ajax({
    url: 'action.php',
    type: 'POST',
    data: 'code='+'<?php echo $result[$ab]["code"]; ?>'+'&action3='+value,
    success: function(result) {
                $('#bt<?php echo $no;?>').css('background-color','#f50519');
                }
    })
})
}
</script>