How to get button id correctly?

Question

JavaScript

My js script works a little strange:

<?php
use app\models\User;
use yii\helpers\Html;
use app\components\PeopleWidget;
use yii\helpers\Url;

/**
 * @var User $peopleArr
 * @var PeopleWidget $context
*/
?>

<?php foreach ($peopleArr as $people): ?>
    <?php echo Html::a($people->getAttribute('name'), Url::to(['/user/index', 'id' => $people->getAttribute('nick_name')]));?>
    <?php echo $people->getAttribute('nick_name');?>
    <?php echo Html::button('Сообщение', ['id' => $people->getId(), 'class' => 'mail-to'])?>
    <?php echo Html::button($context->isFriend($people->getId()) ? PeopleWidget::REMOVE_FROM_FRIEND : PeopleWidget::ADD_TO_FRIEND,
        ['id' =>  PeopleWidget::REMOVE_FROM_FRIEND ? $context->getFriendId($people->getId()) : $people->getId(), 'class' => 'action-to-user']);?>
<?php endforeach;?>


<?php
$removeText = PeopleWidget::REMOVE_FROM_FRIEND;
$addText = PeopleWidget::ADD_TO_FRIEND;

$checkFriend = <<< JS
    var removeText = "$removeText";
    var addText = "$addText";
    
    $('.action-to-user').click(function() {
        if ($(this).text() == removeText) {
            $.ajax('/user/delete-friend/', {
                type: 'post',
                data: 'id-friend=' + this.id + '&is-people=' + true,
                success: function (response) {
                 $(('#'+response)).text(addText);
                },
                error: function() {
                    alert('error');
                }
             });
        } 
       if ($(this).text() == addText) {
         $.ajax('/user/add-friend/', {
            type: 'post',
            data: 'id-friend=' + this.id,
            success: function(response) {
              alert(response);
            },
            error: function() {
              alert('error');
            }
           });
       }
    });
    
JS;
$this->registerJs($checkFriend, \yii\web\View::POS_READY);
?>

When the first condition is met, the idbutton is passed correctly and the action is performed correctly!
But when the second condition is met, nothing is passed! That is, actionan empty string is passed to the controller!
I tried different options, for example, to set the button just one id, for example 5 - the result does not change!
But when do this:

if ($(this).text() == addText) {
         $.ajax('/user/add-friend/', {
            type: 'post',
            data: 'id-friend=' + 5,
            success: function(response) {
              alert(response);
            },
            error: function() {
              alert('error');
            }

Everything works correctly!
What did I miss? Or maybe I made a mistake somewhere?
I will be grateful for the hint))

Answer 1

Your code works a little strange in general, you write js from php.
Yes, off topic, but why not in a js file?