Cannot use modal in panel in yii2 - yii2

Question

I want to use panel in yii2 project, so I download helpers from kartik-v. In the panel I want to make a button open a popup window or modal, but there is a problem. The modal/popup window working only in the first panel, but when I click button in the second panel, third panel, etc.. nothing happen. What's the problem?
This is the code:
<?php
foreach ($dataProvider->models as $myKandidat)
{
echo '<div class="col-md-4">'
. Html::panel([
'body' => '<div class="panel-body ">'
. '<div class="row">'
. '<div class="col-md-6"><center>'
. Html::img(Yii::getAlias('#web') . '/uploads/' . "{$myKandidat->foto}", ['width' => '129px', 'height' => '150px'])
. '</center></div>'
. '<div class="col-md-6">'
. '<p>' . "{$myKandidat->nama}" . '<b>--' . "{$myKandidat->noInduk}" . '</b><br />From ' . "{$myKandidat->prodi}" .'</p>'
. '<p class="JustifyFull small"><b>Motivation: </b>' . substr("{$myKandidat->motivasi}", 0, 100)
. '... <br />'
. Html::button('Testing', ['value' => Url::to('index.php?r=kandidat/view&id=' . "{$myKandidat->idKandidat}"), 'class' => 'btn btn-success', 'id' => 'modalButton'])
. '</p>'
. '</div>'
. '</div>'
. '</div>',
'footer'=> '<center>Panel Footer</center>',
'footerTitle' => true,
Html::TYPE_DEFAULT,
])
. '</div>';
}
Modal::begin([
'header' => 'Testing',
'id' => 'modal',
'size' => 'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>
This is the main.js
$(function(){
// Get the click of the button
$('#modalButton').click(function(){
$('#modal').modal('show')
.find('#modalContent')
.load($(this).attr('value'));
});
});
And this is my controller:
public function actionView($id)
{
return $this->render('view', [
'model' => $this->findModel($id),
]);
}
Thanks.

Answer 1

You assign an id to a button,
but when you use a loop, your id is repeating
id should be unique or you can use class for showing your modal
<?php
foreach ($dataProvider->models as $myKandidat)
{
echo '<div class="col-md-4">'
. Html::panel([
'body' => '<div class="panel-body ">'
. '<div class="row">'
. '<div class="col-md-6"><center>'
. Html::img(Yii::getAlias('#web') . '/uploads/' . "{$myKandidat->foto}", ['width' => '129px', 'height' => '150px'])
. '</center></div>'
. '<div class="col-md-6">'
. '<p>' . "{$myKandidat->nama}" . '<b>--' . "{$myKandidat->noInduk}" . '</b><br />From ' . "{$myKandidat->prodi}" .'</p>'
. '<p class="JustifyFull small"><b>Motivation: </b>' . substr("{$myKandidat->motivasi}", 0, 100)
. '... <br />'
. Html::button('Testing', ['value' => Url::to('index.php?r=kandidat/view&id=' . "{$myKandidat->idKandidat}"), 'class' => 'btn btn-success modalButton'])
. '</p>'
. '</div>'
. '</div>'
. '</div>',
'footer'=> '<center>Panel Footer</center>',
'footerTitle' => true,
Html::TYPE_DEFAULT,
])
. '</div>';
}
Modal::begin([
'header' => 'Testing',
'id' => 'modal',
'size' => 'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>
in main.js
$(function(){
// Get the click of the button
$('.modalButton').click(function(){
$('#modal').modal('show')
.find('#modalContent')
.load($(this).attr('value'));
});
});