How to make a modal window for each button?

Question

Yii

The point is.
Forich displays vacancies from me

View

<section id="inner-headline">
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <h2 class="pageTitle">Вакансии</h2>
            </div>
        </div>
    </div>
</section>

<section id="content">
<div class="container">
    <?php foreach ($vac as $item) :?>
    <div class="panel">
        <div class="panel-heading">
            <h4 class="panel-title">
                    <i class="fa "></i><h3><?=$item['name']?></h3>

                    <i class="fa "></i><h4>Описание</h4>
                    <i class="fa "></i><?=$item['text']?>
                    <br>
                    <i class="fa "></i><h4>Требования</h4>
                    <i class="fa "></i><?=$item['requirements']?>
                    <br>
                    <i class="fa "></i><h4>Условия</h4>
                    <i class="fa "></i><?=$item['сonditions']?>

            </h4>

        </div>
        <a href="<?= \yii\helpers\Url::to(['vacancies/response', 'id' =>$item['id']])?>" type="button" data-id="<?=$item['id']?>" class="btn btn-success btn-default btnbaton" id="btnbaton">Отправить отклик</a>
        <?php
        \yii\bootstrap\Modal::begin(
            [
                'header' => '<h2> Отклик на вакансию </h2>',
                'id' => 'response',
                'footer' => '<button type = "button" class = "btn btn-default" data-dismiss = "modal">Закрыть</button>
<button type = "button" class = "btn btn-success">Отправить</button>'

            ]
        );
        \yii\bootstrap\Modal::end();


        ?>
    </div>
    <?php endforeach; ?>

</div>
</section>

The functionality is described as follows

function showCart(cart)
  {
    $('#response .modal-body').html(cart);
    $('#response').modal();
    
    }

    $('.btnbaton').on('click', function (e)
    {
        e.preventDefault();
        var id = $(this).data('id');

        $.ajax(
            {
                url:'index.php?r=vacancies/response',
                data: {id:id},
                type: 'GET',
                success: function (res) {
                    showCart(res);
                },
                error: function () {
                    alert('Error');
                }
            }
        );
    });

The point is. In the modal window, there will be a form to fill out, and this data will again fly to the server by Ajax.
But roughly speaking, I always get the same modal window on the click of any button. Only the response parameter changes, which comes depending on the button click.
A modal window in Yii has a header.
So I wanted the header to contain the name of the vacancy. I even shoved the modal window into the cycle. So that it creates modal windows by the name of the vacancy. But still, when you click on the header, the same vacancy gets

Answer 1

First, remove the modal window from the loop in the template so that it only remains in one instance. Secondly, make the server send JSON, in which there will be a separate body (dynamic content of the modal window) and a separate job title. Then in the showCart method you can update both the title and the body of the window:

function showCart(cart) {
    $('#response .modal-title').html(cart.title);
    $('#response .modal-body').html(cart.body);
    $('#response').modal();
    ..........................